如何添加不存在的属性,并且此属性可以做响应式
通过Vue.set、vm.$set()
addSex() {
Vue.set(this.student,'sex','男')
},
点击按钮进行 属性值+1
<button @click="student.age++">点击按钮年龄+1</button>
点击对已经存在的属性进行修改
<button @click="student.sex='女'">修改性别</button>
添加数组中的第一个元素-具有响应式
addFriend(){
this.student.friends.unshift({name:"aa",age:38})
},
修改数组中的第一个元素中的属性,第一个元素是对象 可以通过索引
upadte(){
this.student.friends[0].name='张三' //修改对象的属性可以 但是修改数组地0项目没有
},
添加一个数组元素
addHobby(){
this.student.hobby.push('跑')
},
更新一个数组元素
upadateHobby(){
this.student.hobby.splice(0,1,"开车")
}
全部代码
<!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>
<script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>
<body>
<!-- 计算属性实现 -->
<!-- 准备容器 -->
<div id='root'>
<h1>学生信息</h1>
<h2>学生姓名:{{student.name}}</h2>
<h2>年龄:{{student.age}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<button @click="student.age++">点击按钮年龄+1</button>
<button @click="addSex">添加性别属性,默认值:男</button>
<button @click="student.sex='女'">修改性别</button>
<button @click="addFriend">在列表首位添加一个朋友名字</button>
<button @click="upadte">修改第一个朋友的名字为张三</button>
<button @click="addHobby">添加一个爱好</button>
<button @click="upadateHobby">修改一个爱好为:开车</button>
<h2>爱好</h2>
<ul>
<li v-for="(f,index) in student.hobby" :key="index">
{{f}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
student: {
name: "Tom",
age: 18,
hobby: ['bike', 'ride', 'run'],
friends: [
{ name: 'sha', age: 36 },
{ name: 'asml', age: 36 }
,],
}
},
methods: {
addSex() {
Vue.set(this.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:"aa",age:38})
},
upadte(){
this.student.friends[0].name='张三' //修改对象的属性可以 但是修改数组地0项目没有
},
addHobby(){
this.student.hobby.push('跑')
},
upadateHobby(){
this.student.hobby.splice(0,1,"开车")
}
},
});
/*
1、Vue会监视data中有层次的数据
2、如何监测对象中的数据
通过setter实现监视,Vue默认不做响应式处理
a、对象中后追加的属性,Vue默认不做响应式处理
b、如需给后添加的属性做响应式,就得使用api set ——可以添加对象和数组
Vue.set(添加的目标,索引或者属性名,值)
vm.$set(添加的目标,索引或者属性名,值)
3、如何监测数组中的数据
通过包裹数组更新元素的方法实现,本质就是实现了两个步骤
a、调用原生对应的方法对数组进行更新
b、重新解析模板,进而更新页面
4、在Vue修改数组中的某个元素必须使用下面的方法
a、使用push() pop() shift() unshift() splice() sort() reverse()
b、Vue.set(添加的目标,索引或者属性名,值)
vm.$set(添加的目标,索引或者属性名,值)
!!!注意Vue.set()vm.$set()不可以vm或根数据对象添加属性!!!
*/
</script>
</body>
</html>
![](https://img-blog.csdnimg.cn/img_convert/a0befb1646f4a2a8388b80315e6d88b4.png)
总结
1、Vue会监视data中有所有层次的数据
2、如何监测对象中的数据
通过setter实现监视,Vue默认不做响应式处理
a、对象中后追加的属性,Vue默认不做响应式处理
b、如需给后添加的属性做响应式,就得使用api set ——可以添加对象和数组
Vue.set(添加的目标,索引或者属性名,值)
vm.$set(添加的目标,索引或者属性名,值)
3、如何监测数组中的数据
通过包裹数组更新元素的方法实现,本质就是实现了两个步骤
a、调用原生对应的方法对数组进行更新
b、重新解析模板,进而更新页面
4、在Vue修改数组中的某个元素必须使用下面的方法
a、使用push() pop() shift() unshift() splice() sort() reverse()
b、Vue.set(添加的目标,索引或者属性名,值)
vm.$set(添加的目标,索引或者属性名,值)
!!!注意Vue.set()vm.$set()不可以vm或根数据对象添加属性!!!
数据劫持
![](https://img-blog.csdnimg.cn/img_convert/de93e3a3d112b7331f08eee2f027fec1.png)
将传入的属性都进行变化--都具有了get set 这种操作就是数据劫持,如果有人修改了student,就会被set察觉到,劫持到会进行更改数据 然后重新解析模板 数据劫持数据代理都改变不了 Object.defineProperty