美文网首页
vue2和vue3 的双向数据绑定

vue2和vue3 的双向数据绑定

作者: 脆脆鲨765 | 来源:发表于2020-01-10 17:17 被阅读0次

vue2

基于Object.defineProperty()实现

Object.defineProperty() 在一个对象上定义一个新的属性,或者修改这个对象上已经存在的属性

Object.defineProperty(obj, prop, desc)
  1. obj: 目标对象
  2. prop: 对象的key
  3. desc: 属性描述
desc 参数为一个对象,里面的属性是
let Person = {}
let backup = null
Object.defineProperty(Person, 'name', {
    value: 'Jack', // key 的值
    writable: true, // 是否可写,默认false
    enumerable: true, // 是否可枚举,是否可for in
    configurable: ture, // 是否可配置,是否可删除等,默认fasle
    get: function() { // 获取数据方法
        return backup
    },
    set: function(newVal) {  // 更改方法,接受参数为新值
        backup = newVal
    }
})

基于Object.defineProperty(obj, prop, desc)的vue双向数据绑定

function vue() {
    this.$data = {
        testData: 1
    }
    this.el = docunment.getElementById('app')
    this.virtualDom = ''
    this.observer(this.$data)
    this.render()
}
vue.prototype.observer = function(data) {
    let self = this;
    let backup = null;
    for(let key in data) {
        backup = data[key] // 先备份数据
        if (typeof backup === 'object') {
            this.observer(backup)
        } else {
            Object.defineProperty(data, key, {
                get: function() {
                    // 依赖收集
                    return backup // 一定要return出去才可以
                },
                set: function(newVal) {
                    backup = newVal
                    self.render() // 刷新视图
                }
            })
        }
    }
}
vue.prototype.render = functin() {
    this.virtualDom = 'a test vue' + this.$data.testData
    this.el.innerHtml = this.virtualDom
}

vue3 基于Proxy

与Object.defineProperty(obj, prop, desc)方式相比有以下优势:
  1. 丢掉麻烦的备份数据
  2. 省去for in 循环
  3. 可以监听数组变化
  4. 代码更简化
function vue() {
    this.$data = {
        testData: 1
    }
    this.el = docunment.getElementById('app')
    this.virtualDom = ''
    this.observer(this.$data)
    this.render()
}
vue.prototype.observer = function(data) {
    let self = this;
    this.$data = new Proxy(this.data, {
        get: function(target, key, vceiver) {
            return target[key]
        },
        set: function(target, key, value, vceiver) {
            target[key] = value
            slef.render()
        }
    })
}
vue.prototype.render = functin() {
    this.virtualDom = 'a test vue' + this.$data.testData
    this.el.innerHtml = this.virtualDom
}

相关文章

  • v2和v3版本区别

    vue2和vue3双向数据绑定原理发生了改变vue2 的双向数据绑定是利用ES5 的一个 API Object. ...

  • Vue2和Vue3的区别

    1:vue2和vue3双向数据绑定原理发生了改变 vue2的双向数据绑定是利用ES5的一个APIObject.de...

  • vue基础题

    Vue2和Vue3的双向数据绑定的原理 Vue2的核心就是通过Object.defineProperty()方法设...

  • vue3学习

    一、基础语法 1、双向数据绑定 vue2 vue3 2、ref, reactive ref:一般用在定义基本类型和...

  • vue2和vue3 的双向数据绑定

    vue2 基于Object.defineProperty()实现 Object.defineProperty() ...

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

  • 双向绑定所使用到的defineProperty()

    vue是近年来大火的前端框架,采用数据驱动思想,其中双向绑定是最重要的特点之一。vue2中双向绑定的实现使用了Ob...

  • 我的面试经

    年前的前端面试总结 本人最近在找工作,对最近遇到的面试题目做一下总结 vue 双向绑定 vue2 vue3 这里分...

  • [转] DataBinding 数据绑定

    数据绑定分为单项绑定和双向绑定两种。单向绑定上,数据的流向是单方面的,只能从代码流向 UI;双向绑定的数据是双向的...

  • Vue 组件通信(双向绑定)

    参考:如何在Vue2中实现组件props双向绑定

网友评论

      本文标题:vue2和vue3 的双向数据绑定

      本文链接:https://www.haomeiwen.com/subject/jklmactx.html