前言

vue2是如何追踪数据变化形成响应

vue2响应的注意点

 <div id='app'>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click='changeName'>改变data中name属性</button>
    <button @click='addAge'>给data添加age属性</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          user: { name: '山竹' }
        }
      },
      methods: {
        changeName() {
          //如果是一开始就设定属性,绑定页面后,点击会触发
          this.user.name = '杀生丸'
        },
        addAge() {
          //非响应
          this.user.age = 18
          console.log(this.user);//age: 18,name: "杀生丸"
        }
      }
    })
  </script>

解决方案

对象

方案一:初始时设定

<div id='app'>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click='changeName'>改变data中name属性</button>
    <button @click='addAge'>给data添加age属性</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          user: { name: '山竹', age: '' }
        }
      },
      methods: {
        changeName() {
          //如果是一开始就设定属性,绑定页面后,点击会触发
          this.user.name = '杀生丸'
        },
        addAge() {
          this.user.age = 18
          console.log(this.user);//age: 18,name: "杀生丸"
        }
      }
    })
  </script>

方案二:调用Vue.set方法

 <div id='app'>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click='changeName'>改变data中name属性</button>
    <button @click='addAge'>给data添加age属性</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          user: { name: '山竹' }
        }
      },
      methods: {
        changeName() {
          //如果是一开始就设定属性,绑定页面后,点击会触发
          this.user.name = '杀生丸'
        },
        addAge() {
          // Vue.set(原对象/数组,需要设置的新属性, 需要设置的新值)
          Vue.set(this.user, 'age', 18)
          console.log(this.user);//age: 18,name: "杀生丸"
        }
      }
    })
  </script>

方案三:创建一个新的对象,替换原对象

<div id='app'>
    <p>{{ user.name }}</p>
    <p>{{ user }}</p>
    <button @click='changeName'>改变data中name属性</button>
    <button @click='add'>给data添加新属性</button>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          user: { name: '山竹' }
        }
      },
      methods: {
        changeName() {
          //如果是一开始就设定属性,绑定页面后,点击会触发
          this.user.name = '杀生丸'
        },
        add() {
          // Object.assign方法的第一个参数是目标对象,后面的参数都是源对象
          // Object.assign(目标对象,原对象, 新属性)
          this.user = Object.assign({}, this.user, { skill: '铁碎牙', age: 18 })
          console.log(this.user);//age: 18,name: "山竹",skill: "铁碎牙"
        }
      }
    })
  </script>

数组

方案一:切割替换原数组

//vm.items.splice(下标, 1, 新数组)
vm.items.splice(indexOfItem, 1, newValue)

方案二:Vue.set

//Vue.set(原数组,需要设置的下标, 需要设置的新值)
Vue.set(vm.items, indexOfItem, newValue)