Vue监视数据的原理
一、Vue监视数据的原理1.vue会监视data中所有层次的数据2.如何检测对象中的数据?通过setter实现数据检测 且要在new vue时就要传入要检测的数据(1)对象中后追加的属性 vue默认不做响应式处理(2)如需给后添加的属性做响应式 请使用如下APIVue.set(target,propertyName/index.value)或vm.$set(target,propertyName/
·
一、Vue监视数据的原理
1.vue会监视data中所有层次的数据
2.如何检测对象中的数据?
通过setter实现数据检测 且要在new vue时就要传入要检测的数据
(1)对象中后追加的属性 vue默认不做响应式处理
(2)如需给后添加的属性做响应式 请使用如下API
Vue.set(target,propertyName/index.value)
或
vm.$set(target,propertyName/index.value)
3.如何检测数组中的数据
通过包裹数组更新元素的方法实现,本质就是做了两件事
(1)调用原生对应的方法对数组进行更新
(2)重新解析模板,进而更新页面
4.在Vue修改数据中的某个元素一定要用如下方法:
(1).使用这些API:push() pop() shift() unshift() splice() reverse()
(2).Vue.set() 或 vm.$set()
特别注意:Vue.set() 和 vm.$set() 不能给vm或vm的根对象添加属性
案例:
<div id="root">
<h1>学生信息</h1>
<button @click="student.age.rAge++">年龄+1岁</button> <br/>
<button @click="addSex">点我添加性别,默认为男</button> <br/>
<button @click="student.sex='未知'">修改性别</button> <br/>
<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
<button @click="updataFirstFriendName">修改第一个朋友的名字为:张三</button> <br/>
<button @click="addHobby">添加一个喜好</button> <br/>
<button @click="updataFirstHobby">修改第一个喜好为:开车</button> <br/>
<button @click="remove">过滤掉爱好中的抽烟</button>
<h2>学生姓名:{{student.name}}</h2>
<h2 v-if="student.sex">学生性别:{{student.sex}}</h2>
<h2>学生年龄:真实{{student.age.sAge}}, 对外{{student.age.rAge}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
student:{
name:'tom',
age:{
rAge: 40,
sAge: 29
},
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:25}
]
}
},
methods: {
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriend(){
this.student.friends.push({name:'mery',age:'23'}) //在最后一个添加
this.student.friends.unshift({name:'Jack',age:'26'}) //在第一个添加
},
updataFirstFriendName(){
this.student.friends[0].name = '张三'
},
addHobby(){
this.student.hobby.push('追剧')
},
updataFirstHobby(){
// this.student.hobby.splice(0,1,'开车')
// Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')
},
remove(){
this.student.hobby = this.student.hobby.filter((h) =>{
return h != '抽烟'
})
}
},
})
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)