今天是2022年6月23日,是我学习vue的第六天
今天没经受住诱惑，打了一天的麻将，引以为戒
Vue.set( target, propertyName/index, valu…
- 参数：
{Object | Array} target{string | number} propertyName/index{any} value
- 返回值：设置的值。
- 用法：
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi')
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
<html> <head> <meta charset="UTF-8" /> <title>Vue监测数据改变的原理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h1>学校信息</h1> <h2>学校名称：{{school.name}}</h2> <h2>学校地址：{{school.address}}</h2> <h2>校长是：{{school.leader}}</h2> <hr/> <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> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ school:{ name:'尚硅谷', address:'北京', }, student:{ name:'tom', age:{ rAge:40, sAge:29, }, friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ // Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') } } }) </script> </html>
数据更新检测
- 变更方法
- Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()：用来向数组的末尾添加一个或多个元素，并返回数组新的长度pop()：用来删除数组的最后一个元素，并返回被删除的元素shift()：删除数组的前边的一个元素，并返回被删除的元素unshift()：向数组的前边添加一个或多个元素，并返回数组的新的长度splice( index，index2 )：可以从一个数组中截取指定的元素 index(包括)，index3(不包括)sort()：用原地算法对数组的元素进行排序，并返回数组；默认将元素转换字符串比较UTF-16 代码单元值reverse()：将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组。
- 替换数组
- 变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如
filter()、concat()和slice()。它们不会变更原始数组，而总是返回一个新数组。
- 注意事项
- 由于
JavaScript的限制，Vue不能检测数组和对象的变化
Vue监视数据的原理
Vue会监视data中所有层次的数据- 如何监测对象中的数据？
- 通过
setter实现监视，且要在new Vue时就传入要监测的数据。
- 对象中后追加的属性，
Vue默认不做响应式处理 1. 如需给后添加的属性做响应式，请使用如下 API： Vue.set(target, propertyName/index ,value)或
vm.$set(target, propertyName/index ,value)
- 例：
- 修改第一个爱好为'开车'
Vue.set(this.student.hobby,0,'开车2') - 添加性别属性，默认为男
this.$set(this.student,'sex','男')
- 如何检测数组中的数据？
- 通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新； 1. 更新解析模板，进而更新页面。
- 在
Vue修改数组中的某个元素一定要用如下方法 - 使用这些API：
push(),pop(),shift(),unshift(),splice(),sort(),reverse()1.Vue.set()或vm.$set() - 特别注意
Vue.set()和vm.$set()不能给 vm（Vue实例） 或 vm 的根数据对象（vm._data）添加属性!!!!
