vue监视属性,vue怎么监控数据有变化
本文主要详细介绍Vue监测数据的原理。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.VUE监控数据的原理(set方法)1.1 VUE监控不同类型数据的原理1.1.1如何监控对象中的数据？1.1.2如何监控阵列中的数据？1.1.3小病例1.1.4集合()小病例概述
1. Vue监视数据的原理（set方法）
1.1 Vue监视不同类型数据的原理
特点：vue会监视data中所有层级的数据，并且如果他检测到是对象那么就会给对象里面所有的属性配置getter和setter函数
1.1.1 如何监测对象中的数据？
监控是通过setter实现的，要监控的数据要在new Vue传入。
(1).对于追加在对象中的属性，Vue默认不响应(即不配置getter和setter函数)。
(2).如果您需要响应稍后添加的属性，请使用以下API:
Vue.set(目标，属性名/索引，值)
vm。$set(目标，属性名/索引，值)
1.1.2 如何监测数组中的数据？
通过包装数组来更新元素，它实际上做了两件事：
(1).调用本机对应的方法来更新数组。
(2)重新解析模板，然后更新页面。
要在Vue中修改数组中的元素，必须使用以下方法：
(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2).Vue.set()或vm。$set()
1.1.3 小案例
div id=root
H2人事信息/h2
Button @click=updatep 单击以更新马冬梅的信息/button
保险商实验所
li v-for=p in person :key=p.id
{ { p . name } }-{ { p . age } }-{ { p . gender } }
/李
/ul
Button @click=addNew 在末尾添加一个人的信息/button
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
人：[
{id: 001 ，姓名： 马冬梅，年龄：20，性别：女 }，
{id: 002 ，姓名： 夏洛特，年龄：33岁，性别：男 }，
{id: 003 ，姓名： 沈腾，年龄：50，性别：男 }，
{id: 004 ，姓名： 贾玲，年龄：45，性别：女 }，
]
},
方法：{
updatep() {
//但是下面这个方法不行，这个方法Vue检测不到，
//原因是数组上没有getter和setter方法，所以检测不到数据变化。
//this.person [0]={ID: 001 ，姓名：李焕英，年龄：66，性别：女 }
//下面的方法有效，因为getter和setter方法已在属性上配置。
//this.person[0]。name=李焕英
//this.person[0]。年龄=66
//this.person[0]。性别=女性
//this.person.splice (0，1，{ID: 001 ，姓名：李焕英，年龄：66，性别：女 })
这个。$ set(这个。人，0，{ID: 001 ，姓名：李焕英，年龄：66岁，性别：女 })
},
addNew() {
This.person.push ({ID: 005 ，姓名：老姐，年龄：99，性别：女 })
}
},
})
/脚本
1.1.4 set()小案例
div id=root
H2学生信息/h2
P name: {{student.name}}/p
！-
重要的一点：如果你在寻找一个对象中不存在的属性，你将返回一个未定义的属性。
无论v-show还是v-if，如果没有定义就不会显示。
-
P-show= student.sex 性别：{{student.sex}}/p
P: {{student.age}}/p
地址：{{student.address}}/p
p联系信息：{{student.contact}}/p
Friends: p v-for= (v，index)in student . friends :key= index { { v . name } }-{ { v . age } }/p
Button @click=add 单击以添加性别/button
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
学生：{
姓名：“杰克”，
年龄：18，
地址：“北京”，
联系人： 13
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。