为什么v-model是语法糖和vue2响应式的缺点

v-model是语法糖

简单点说语法糖就是对一个更加复杂的操作的封装

// 1. v-model 在表单元素上使用
<input v-model="num" />

// 2. v-model 在自己定义的组件上使用
<MyCom v-model="num" />
上面的写法是快捷方式，它等价于如下复杂的写法：
<MyCom :value="num" @input="新值=>num=新值" />

// v-model做两件事：
// 1. 向子组件传来一个名为value的属性
// 2. 在子组件监听input事件，这个事件的回调中修改value所绑定的值

 父组件 :

<template>
  <div>
    <h2>父组件{{ num }}</h2>
    <MyCom v-model="num" />
    <!-- <MyCom v-model="num" />是下面的简单写法 -->
    <!-- <MyCom :value="num" @input="fn" /> -->
  </div>
</template>

<script>
import MyCom from './MyCom.vue'
export default {
  data() {
    return {
      num: 100
    }
  },
  components: {
    MyCom
  },
  methods: {
    fn(a) {
      console.log(a)
      this.num = a
    }
  }
}
</script>

<style>
</style>

子组件 :

<template>
  <div>
    <h2>子组件{{ value }}</h2>
    <button @click="fn">修改值</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    fn() {
      this.$emit('input', 200)
    }
  }
}
</script>

<style>
</style>

优点 : v-model写法比较简单 , 一个指令实现两个功能 , 父传子(value属性) , 子传父(input事件)

是否可以不用 : 可以

vue2响应式的缺点

响应式 : 数据改变 --> 视图跟着变化

1 对象新增的属性没有响应式

2 数组的部分操作没有响应式

        拥有数据响应式的七种 : push()，pop()，shift()，unshift()，splice()，sort()，reverse()

1 对象新增的属性没有响应式 :

<template>
  <div>
    <h2>响应式的缺陷-对象</h2>
    <p>{{Math.random()}}</p>
    <p>a: {{obj.a}}, b: {{obj.b}}, c:{{obj.c}}</p>
    <button @click="fn">a++</button>
    <button @click="fn1">添加一个属性</button>
    <button @click="fn2">添加一个属性+有响应式</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj: {
        a: 1
      }
    }
  },
  methods:{
    fn2(){
      // 添加一个属性+有响应式
      // vue提供的API
      // $set(对象，属性名，属性值)
      this.$set(this.obj, 'c', 3)
    },
    fn1(){
      this.obj.b = 2
    },
    fn(){
      this.obj.a++
    }
  }
}
</script>

<style>

</style>

 2 数组的部分操作没有响应式

<template>
  <div>
    <h2>响应式的缺陷-数组</h2>
    <div>
      数组的操作有7个方法有响应式的效果：

      push() pop() shift() unshift() splice() sort() reverse()
      就这个7个api会修改原数组(vue2的内部它重写这7个API)

      其他的操作都不会有响应式：
      1. 通过下标给元素赋值。
      2. 修改数组的length
    </div>
    <p>{{Math.random()}}</p>
    <p v-for="item in arr" :key="item">{{item}}</p>
    <button @click="fn">数组push</button>
    <button @click="fn1">把第一个元素改成100</button>
    <button @click="fn2">length改成0</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr:[1,2,3]
    }
  },
  methods:{
    fn2(){
      this.arr.length = 0
    },
    fn1(){
      // 直接通过下标来修改，没有响应式
      // this.arr[0] = 100

      // 方法1： 先删除，再添加
      // this.arr.splice(0,1,100)

      // 方法2： $set
      this.$set(this.arr, "0", 100)
    },
    fn(){
      // push()，pop()，shift()，unshift()，splice()，sort()，reverse()
      // 数组push
      this.arr.push(4)
    }
  }
}
</script>

<style>

</style>