账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue中的响应式原理,有两个问题请大家回答一下?
    29
    0

    首先上代码

    var data ={
      msg:'hello world'
    }  //定义一条数据
    new Bue({
      data : data   //vm层  data是不能变得,让data等于data 确定数据
    })
    
    function Bue(options){    ///?????????????
      var data = options.data   ///?????????????
      var _data = {}
      Object.defineProperty(_data,'msg',{
        get:function(){  //当数据被使用的时候 触发,数据返回什么就显示什么
          return data.msg
        },
        set:function(newvel){ //当数据更改的时候被触发,将数据呈现在视图里
          document.getElementById('a').innerHTML = newvel
        }
      })
      document.getElementById('a').innerHTML = _data.msg
      inp.oninput = function(){ //给input绑定一个如果更改文本框中的内容就触发就事件
      console.log(this)
        _data.msg = this.value    //这里的this指的就是input 让input的值等于_data中的数据,然后将数据呈现在页面上。
      }
    }
    

    这是解释vue响应式原理的原生代码,在此我有几个问题,希望大家可以帮忙解决?

    1.这为什么要传一个参数options呢?
    
    2. var data = options.data 的作用是什么?为什么不直接data = data 呢?
    
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 耳下落腮红 普通会员 1楼

      Vue.js的响应式原理主要基于以下几个核心概念:

      1. 数据劫持(Data Obeservation): Vue通过Object.defineProperty()方法对data对象的所有属性进行递归遍历,将它们转换为getter和setter。当访问或修改这些属性时,Vue能够记录依赖关系(收集依赖)并触发相应的更新(派发更新)。也就是说,Vue在组件实例化的过程中,会利用Object.defineProperty将data对象中所有属性转为 getter/setter 的形式,从而实现数据变化时视图自动更新。

      2. 依赖收集(Dependency Collection): 当渲染一个组件时,Vue会追踪其模板中任何绑定到响应式属性的指令(如v-bind、v-if、v-for等)。当属性值发生变化时,Vue知道哪些组件需要重新渲染,因为它们被标记为“依赖”于该属性。

      3. 派发更新(Change Notification): 当改变了一个响应式属性的值时,setter会被调用,进而触发相关依赖的更新。Vue会把与这个属性相关的Watcher(观察者对象)加入到一个队列中,然后异步地更新这些Watcher,以确保所有的变动在同一事件循环内一并处理,避免不必要的DOM操作。

      对于你的问题,虽然你没有明确指出具体的问题点,但以上内容基本涵盖了Vue响应式原理的主要问题。如果有更具体的疑问,欢迎继续提问。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部