<template>
<div class="app">
<!-- $set 用法 -->
<div>{{ name }}</div>
<div>{{ age }}</div>
<div>{{ info.sex }}</div>
<div>{{ info.content }}</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
name: '冰墩墩',
age: '1',
info: {
content: '我贼贵'
}
}
},
mounted() {
console.log(this)
this.info.sex='母'
},
</script>
打印this,并且添加属性this.sex='母'
通过控制台可以看到 实际属性添加上了,视图没有更新。
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。通过打印出来的this在原型对象Prototype原型对象上找$set方法实现动态响应式添加属性
通过调用this.$set方法 (!!!第一项可以是对象或者数组)
mounted() {
console.log(this)
// $set: ƒ (target, key, val)
// target:要更改的数据源(可以是对象或者数组)
// key:要更改的具体数据
// value :重新赋的值
this.$set(this.info,'sex','母')
},
效果:数据试图同时更新