1. Vue 响应式实现原理
vue2响应式的原理是借助数据劫持和发布订阅者模式
1、数据劫持:
目的:能够感知到数据的改变。
数据劫持是:使用ES5的Object.defineProperty()。把data配置项中的所有数据进行遍历,转成setter和getter(或者说,给每个属性增加set和get函数)既就是:访问器属性。
2、发布订阅者模式:
目的:当数据改变时,(直接和间接)使用该数据的模板处都会有相应的改变(模板会重新渲染)
Vue 3 的响应式原理基于 Proxy 对象和 Reactive API 实现
2. Vue v-model双向数据绑定实现原理
v-model 指令是 Vue 提供的一个语法糖,它可以在表单控件上双向绑定数据。
实际上,v-model 的背后是一个与组件相同的语法糖,其原理也是基于组件的通信功能。
v-model的本质是利用事件和属性的结合,例如:
1)、针对文本框(单行和多行):value属性和input事件。 如果加上修饰符 lazy。事件变成了change事件。
2)、针对radio:使用的checked属性和change事件。同时,需要给radio加上value属性。
3)、针对checkbox:使用的checked属性和change事件。
3.1)、如果应用在多选时,需要给checkbox加上value属性。
3.3)、如果应用在单选时,不需要加。
4)、针对select:使用value属性和change事件。
以下是 v-model 实现原理的详细步骤:
1. 将表单控件封装成自定义组件
通过将表单控件封装成自定义组件,我们可以使用组件的 props 和 emit 方法方便地处理数据的双向绑定。
<template>
<input :value="innerValue" @input="onInput">
</template>
<script>
export default {
name: 'MyInput',
props: {
value: String,
},
emits: ['update:value'],
data() {
return {
innerValue: this.value,
};
},
methods: {
onInput(event) {
this.innerValue = event.target.value;
this.$emit('update:value', this.innerValue);
},
},
};
</script>
2. 在父组件中使用自定义组件绑定 v-model
在父组件中使用自定义组件的方式与原生的表单控件相同,只需要将 v-model 绑定到自定义组件的 value 属性即可
<template>
<my-input v-model="message"></my-input>
</template>
<script>
import MyInput from './MyInput.vue';
export default {
components: {
MyInput,
},
data() {
return {
message: '',
};
},
};
</script>
在 Vue.js 中 v-model 主要是通过自定义组件的方式实现的。可以通过将原生表单控件封装成一个带有 props 和emit 的组件,并且在父组件中以 v-model 方式使用该组件,来完成数据的双向绑定。