聊一聊 Vue 里的 Object.defineProperty

本文详细解释了Vue中如何实现数据的双向绑定,重点剖析了`initState`和`observe`函数,以及如何通过`$set`方法添加响应式属性。作者揭示了只有data中定义的属性才会被响应式处理,其他属性需通过实例方法实现响应式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天小新独自一人在家学习Vue,十分好奇上次跟小兰探讨的双向数据绑定依赖的响应式,这回他决定仔细看看是怎么回事。

让我们来看一下 new Vue() 发生了些什么:

  1. new Vue() 调用构造函数创建实例 this 及执行 _init,同时把options 通过new的动作传入。

    function Vue(options) {
         
      if (__DEV__ && !(this instanceof Vue)) {
         
        warn('Vue is a constructor and should be called with the `new` keyword')
      }
      this._init(options) // 执行init
    }
    new Vue({
          // options 
      el: '#app',
      data(){
         
        return {
         
          name: 'Vue'
        }
      }
    })
    
  2. _init 初始化options、事件、声明周期。

    vue_init
    export function initMixin(Vue: typeof Component) {
         
      Vue.prototype._init = function (options?: Record<string, any>) {
         
        const vm: Component = this
        // a uid
        vm._uid = uid++ // 给当前组件添加标识
       
        // 初始化事件、声明周期等
        initLifecycle(vm)
        initEvents(vm)
        initRender(vm)
        callHook(vm, 'beforeCreate', undefined, false /* setContext */)
        initInjections(vm) // resolve injections before data/props
        initState(vm) // 初始化 data
        initProvide(vm) // resolve provide after data/props
        callHook(vm, 'created')
    
        /* istanbul ignore if */
        if (__DEV__ && config.performance && mark)</
Vue中,Object.defineProperty个关键的方法,用于实现双向数据绑定和响应式数据。它允许我们在个对象上定义个新属性或修改现有属性的特性。 使用Object.defineProperty方法,我们可以设置属性的value、writable、enumerable和configurable等特性。其中,value表示属性的值,writable表示属性是否可写,enumerable表示属性是否可枚举,configurable表示属性是否可配置。 在Vue中,通过Object.defineProperty方法,Vue能够跟踪数据的变化,并在数据发生变化时更新相关的视图。具体来说,当我们在Vue实例中使用data属性时,Vue会使用Object.defineProperty方法将data对象的属性转化为getter和setter,从而实现数据的响应式更新。 例如,我们可以使用Object.defineProperty方法定义个name属性,并设置为不可写: ```javascript var obj = {} Object.defineProperty(obj, 'name', { value: '科比', writable: false }) ``` 这样,当我们尝试修改name属性的值时,会报错,因为它是只读的: ```javascript obj.name = "库" // Cannot assign to read only property 'name' of object '#<Object>' ``` 通过这种方式,Vue能够在数据发生变化时自动更新相关的视图,实现双向数据绑定的效果。 总结来说,Vue使用Object.defineProperty方法来实现双向数据绑定和响应式数据,通过定义getter和setter来跟踪数据的变化并更新相关的视图。这使得Vue具有强大的数据驱动能力,实现了前端开发中常见的数据绑定功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值