在编写vue的时候遇到了这个警告：
Propertywas accessed during render but is not defined on instance.
是一个小问题，没有报错
总结了下面2种常见的简单解决方法：
1.原因：vue引入有问题，很多大佬都有说到这种解决方案
解决方法：在script标签中加入setup
<script setup>
...
</script>2.原因：警告的 "***"未设置初始值，这也是我的问题，但没有看到大家指出。
解决方法：给该属性添加一个初始值
<script >
var obj = {
data(){
return{
isAll: false, //初始值
...
}
}
}这个小问题不会报错，代码多的情况下挺难找的。
如果是vue引入整个有问题可能会直接报错，所以如果属性警告那大概率问题在于没有设置初始值。细心一点就好。
希望对大家有帮助~
个人案例：用vue实现购物车金额计算和动态增减删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<style>
li{
display:flex;
justify-content: space-around;
padding: 10px;
}
li img{
width:100px;
}
</style>
<script type="text/javascript" src="../lib/vue.next.js"></script>
<!--！！上一行记得改成自己的vue.next.js路径！！--!>
</head>
<body>
<!-- 功能1:勾选 功能2:计算总金额 -->
<div id="box">
<input type="checkbox" v-model="isAll" @change="handleAllChecked"/>全选/全不选<!-- 绑定一个布尔值,change事件在他改变后才获取数值,正确-->
<ul>
<li v-for="(item,index) in datalist" :key="item.id"><!-- v-for遍历 -->
<input type="checkbox" v-model="checkList" :value="item" @change="handleItemChecked"/><!-- 商品选择:双向数据绑定框 -->
<img :src="item.pic"/><!-- 商品图片 -->
<!-- :src动态绑定 -->
<div><!-- 名称+价格 -->
<div>{{item.name}}</div>
<div style="color: #c03bbe;">${{item.price}}</div>
</div>
<div><!-- 数量 -->
<button @click="item.number--" :disabled="item.number===1">-</button> <!-- 商品数量不能小于1 -->
<span>{{item.number}}</span>
<button @click="item.number++" :disabled="item.number===item.limit">+</button><!-- 商品数量不能大于限购数量 -->
</div>
<div><!-- 删除商品按钮 -->
<button @click="handleDeleteClick(index,item.id)">delete</button>
</div>
</li>
</ul>
<div>总金额:${{sum()}}</div>
{{checkList}}
</div>
<script>
var obj = {
data(){
return{
isAll: false, //初始值
checkList:[],//勾选的购物车数据
datalist:[{//所有的购物车数据
name:"商品1",
price:10,
number:1,
id:1,
limit:10,//限购
pic:" https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
},
{
name:"商品2",
price:12,
number:2,
id:2,
limit:5,
pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
},
{
name:"商品3",
price:45,
number:3,
id:3,
limit:10,
pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
},
{
name:"商品4",
price:17.5,
number:1,
id:4,
limit:5,
pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
}
]
}
},
methods:{
sum(){
var total = 0
//累加计算checkList数组中每一项的:价格*数量
this.checkList.forEach(item => {
total+=item.price*item.number
})
return total
},
handleDeleteClick(index,id){
//删除datalist靠index索引
this.datalist.splice(index,1)//splice(从几号索引开始删除,删除几个)
//删除checklist靠匹配id
this.checkList = this.checkList.filter(item=>item.id!==id)//过滤:更新checkList,返回剩下的未被过滤掉的元素(id与被删商品id不符的)
//状态同步，完善全选删除状态反馈
this.handleItemChecked()
},
//比较两数组长度,长度相等为全选
handleAllChecked(){
if(this.isAll){
this.checkList = this.datalist
}else{
this.checkList = []
}
},
//每项选择:选中为全选,取消为全不选
handleItemChecked(){
if(this.checkList.length===this.datalist.length){
this.isAll = true
}else{
this.isAll = false
}
}
}
}
var vm = Vue.createApp(obj).mount("#box")//引入vue
</script>
</body>
</html>