说一下v-model的理解双向绑定 vue响应式原理

1.vue响应式原理 和proxy的对比

参考: 1. vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截他的原型方法来实现响应式. 2. 这个时候Vue提供了一个api :this.$set来实现新增的属性也拥有响应式的效果.
问题:但是很多时候需要小心翼翼的去判断到底什么情况下需要用 $set，什么时候可以直接触发响应式。
在 Vue3 中，这些都将成为过去。proxy 到底会给 Vue3 带来怎么样的便利。
例子1.

let vm = new Vue({
   
 data() {
   
 return {
   
 a: 1
 }}})
// ❌ oops，没反应！
vm.b = 2 
let vm = new Vue({
   
 data() {
   
 return {
   
 a: 1
 }
 },
 watch: {
   
 b() {
   
 console.log('change !!')
 }}})
 
// ❌ oops，没反应！
vm.b = 2

1.3 vue2 响应式原理

例1.利用input实现数据双向绑定

 理解:
    发布者
    订阅者
    观察者
 <!-- 发布者 -->
  <input type="text">
  <!-- 订阅者 -->
  <div class="demo"></div>

  <!-- 观察者 Object.defineProperty(目标对象,目标对象中的属性,{
   6个属性：set,get,value,枚举，可选值，是否可写}) -->
  <script>
    /* 观察者 */
    // let target = {} //目标对象
    // Object.defineProperty(target, 'msg', {
   
    //   get () { },
    //   set (value) {
   
    //     console.log(value, 5);
    //     demo.innerHTML = value
    //     ipt.value = value
    //   }
    // })

    // let ipt = document.querySelector('input')
    // let demo = document.querySelector('.demo')