简述vue双向绑定

1. 把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
2. 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
3. 每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

无法检测变动的几种情况

1、对象

• 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

  var vm = new Vue({
    data:{
    	a:1
    }
  })
  // `vm.a` 是响应的
  vm.b = 2
  // `vm.b` 是非响应的
  

• 不允许在已经创建的实例上 动态添加新的根级响应式属性，然而它可以使用 Vue.set(object, key, value) 方法将 响应属性 添加到嵌套的对象上：

  Vue.set(vm.someObject, 'b', 2)
  this.$set(this.someObject,'b',2)
  

• 有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

  this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
  

2、数组

• 当你利用索引直接设置一个项时，

  vm.items[indexOfItem] = newValue
  

  以下两种方式都可以实现相同的效果， 同时也将触发状态更新：

  // Vue.set
  Vue.set(example1.items, indexOfItem, newValue)
  
  // Array.prototype.splice
  example1.items.splice(indexOfItem, 1, newValue)
  

• 当你修改数组的长度时

  vm.items.length = newLength
  

• 显示过滤/排序结果，有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

  <li v-for="n in evenNumbers">{{ n }}</li>
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
  

  你也可以在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 使用 method 方法：

  <li v-for="n in even(numbers)">{{ n }}</li>
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  methods: {
    even: function (numbers) {
      return numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
  

参考文档：https://segmentfault.com/a/1190000009789481#articleHeader3

vue3

const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state
n++

// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字，并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)