Vue面试题整理（二）

29. 说说你对双向绑定的理解，以及它的实现原理吗?

29.1 双向绑定的概念

vue中双向绑定靠的是指令v-model，可以绑定一个动态值到视图上，同时修改视图能改变数据对应的值（能修改的视图就是表单组件）经常会听到一句话：v-model是 value+input 的语法糖。

29.2 表单元素中的v-model

内部会根据标签的不同解析出不同的语法。并且这里有“额外”的处理逻辑

• 例如 文本框会被解析成 value +input事件
• 例如 复选框会被解析成 checked+change事件

29.3 组件中的v-model

组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。对于组件而言 v-model 就是value + input 的语法糖。可用于组件中数据的双向绑定。
名字也可以修改:

Vue.component('base-checkbox',{
  model:{
    prop:"checked'
    event: 'change
  },
  props:{
    checked: Boolean
  },
  template:`
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
      >
  `
})

那组件中如果有多个数据想做双向数据绑定怎么办？很遗憾在vue2中不支持使用多个v-model的。vue3中可以通过以下方法进行绑定。

<my v-model:a="a" v-model:b="b" v-model:c="c"></my>

30. Vue 中 .sync 修饰符的作用?

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，这时可以使用 .sync 来实现，v-model 默认只能双向绑定一个属性，这里就可以通过.sync修饰符绑定多个属性。

`<my :value.sync= xxxx"></my>` ;
// 编译的结果是 with(this){return _c('my',{attrs:{"value":xxxx},on:{"update:value":function(Sevent){xxxx=Sevent}}}}

vue3 中.sync 语法被移除