Vue入门--第二天

Vue的数据响应式

代理和监听

今天深入理解options.data
使用的是完整版的Vue做演示

先看一段代码

const myDate = {
   
  n: 0
}
console.log(myDate)

const vm = new Vue({
   
  data: myDate,
  template: `
    <div>
      {
    {n}}
      <button @click="add">+10</button>
    </div>
  `,
  methods: {
   
    add() {
   
      this.n += 10
    }
  }
}).$mount("#app");

setTimeout(() => {
   
  myDate.n += 10
  console.log(myDate) 
}, 3000)

打印出来的两个东西。

get的计算属性
get怎么用，就是在方法面前加get，然后调用的时候就可以不加括号。

有get那就有set

let obj3 = {
   
  姓: "高"，
  名: "圆圆"，
  get 姓名(){
   
    return this.姓 + this.名
  }，
  set 姓名(xxx) {
   //xxx是名字
    this.姓 = xxx[0]
    this.名 = xxx.substring(1)
  }，
  age: 18
}
console.log(obj3.姓名)//就可以打印出高圆圆，不加括号，用了get
obj3.姓名 = '刘诗诗'//就可以改变姓和名，触发了set函数
console.log(obj3);//把obj3打印出来

最后我们把obj3打印出来可以看到，这个姓名和之前的n差不多，(...)，都长这样

说明之前得到的n也是一个get和一个set,姓名和这个n一样，并不是真实的属性

就是不存在真实的姓名，但是你可以对姓名读和写 通过get和set来完成

上面的get和set都是在对象创建的时候就写好的，如果我们想在对象创建后再去添加get和set

这个时候就用

Object.defineProperty(obj3, 'xxx',{
   
  get(){
   },
  set(){
   }
})

意思是在obj3上面创建了一个xxx是属性，里面有get和set，在上面的get和set上不能使用xxx

再看下面代码

let data0 = {
   
  n