0
点赞
收藏
分享

微信扫一扫

python基础知识(五):while循环、for循环、continue语句和break语句

ZSACH 2023-06-04 阅读 82

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 方式使用该组件,来完成数据的双向绑定。 

 

         

        

举报

相关推荐

0 条评论