目录
添加数据
监测数据（data）原理及拓展
监测数组及（对象，数组）监测概括
第一部分：添加数据
<!-- 准备一个容器 -->
<div id="root">
<h1>公司信息</h1>
<h2>公司名称:{ {school.name}}</h2>
<h2>公司地址:{ {school.address}}</h2>
<h1>学生信息</h1>
<button @click="addsex">添加一个员工性别，默认性别男</button>
<h2>姓名:{ {student.name}}</h2>
<h2 v-if="student.sex">性别:{ {student.sex}}</h2>
<h2>年龄:真实{ {student.age.rAge}},对外{ {student.age.sAge}}</h2>
<h2>朋友们</h2>
<!-- 利用添加的方式将校长的信息给添加进去 -->
<h1 >校长姓名:{ {school.leader}}</h1>
<ul>
<li v-for="(item,index) in student.friends " :key="index">
{ {item.name}}-{ {item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
school:{
name:'北京科技',
address:'北京',
},
student:{
name:'tom',
age:{
rAge:40,
sAge:20
},
friends:[
{name:'jerry',age:34},
{name:'tony',age:32}
]
}
},
methods:{
addsex(){
// Vue.set(this.student,'sex','男')
// 或者
this.$set(this.student,'sex','男')
//这里添加一个校长(注：这里添加校长，在上面必须要对data内部进行改革，利用school将公司的姓名及地址给包裹
//再对其进行添加数据否则会报错)与此同时，原写法是：Vue.set(this._data.school,'leader','校长')下面的是
// 简写
Vue.set(this.school,'leader','校长')
}
}
})
</script>
第二部分：监测数据（data）原理及拓展
<script type="text/javascript">
let data = {
name: '北京科技',
address: '北京'
}// Observer是一个构造函数所以我们用new去调用他,并且传入data,使它可以监测到data的实例对象
// 创建一个监视的实例对象,用于监视data的属性变化
const obs = new Observer(data)
console.log(obs)
// 准备一个实例对象
let vm = {}
vm._data = data = obs
// Observer的意思是监测 构造函数 能够创造出一个实例对象 有一个参数是对象(Object)
function Observer(obj) {
// 汇总对象中所有的属性形成一个数组
const keys = Object.keys(obj)
//遍历
keys.forEach((k) => {
Object.defineProperty(this,k, {get() {
return obj[k]
},
set(val) {
console.log(`${k}被修改了，要去解析模板，生成虚拟dom。。。`)
obj[k] = val
}
})
})
}
// vue的监测原理是通过set.属性名
// 知识点拓展
// 在页面中的控制台中要去获取一组数据时,可以修改其内容的语法是
// vue.set添加数据 vm._data.student查找vue中的变量vm里面的data里面的student
//添加的数据的对象时sex 内容(属性值是男) 回车
// vue.set(vm._data.student,'sex','男')
//可以简写成 vue.set(vm.student,'sex','男')或者
// vue.$set(vm.student,'sex','女')
第三部分：监测数组及（对象，数组）监测概括
<!-- 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(),sort(),reverse()
2,vue.set()或vm.$set()
特别注意:
vue.set()和vm.$set()不能给vm的根数据对象 添加属性!!!-->
<div id="root">
<ul>
<h1>爱好</h1>
<button @click="onclock">过滤掉爱吸烟的人</button>
<li v-for="(item,index) of hobby" :key="index">
{ {item}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
// 通过vue中的set与get是不能改变vue中页面的内容
// 只有以下几种可以影响到vue中原数组发生变化的修改方法:push,pop,shift,unshift,splice,sort,reverse
// 修改案例: 对数组进行修改vm._data.hobby[0] = '打牌'
//修改案例2:vm._data.hobby.push('内容')
hobby:['抽烟','喝酒','烫头']
},
methods:{
onclock(){
// 过滤掉吸烟 将数据重新返回给vue页面 filter具有筛选但不能修改某个值 用新数组覆盖旧数组
this.hobby = this.hobby.filter((h)=>{
return h !='抽烟'
});
}
}
})
</script>