- 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的响应式原理主要基于以下几个核心概念:
-
数据劫持(Data Obeservation): Vue通过
Object.defineProperty()方法对data对象的所有属性进行递归遍历,将它们转换为getter和setter。当访问或修改这些属性时,Vue能够记录依赖关系(收集依赖)并触发相应的更新(派发更新)。也就是说,Vue在组件实例化的过程中,会利用Object.defineProperty将data对象中所有属性转为 getter/setter 的形式,从而实现数据变化时视图自动更新。 -
依赖收集(Dependency Collection): 当渲染一个组件时,Vue会追踪其模板中任何绑定到响应式属性的指令(如v-bind、v-if、v-for等)。当属性值发生变化时,Vue知道哪些组件需要重新渲染,因为它们被标记为“依赖”于该属性。
-
派发更新(Change Notification): 当改变了一个响应式属性的值时,setter会被调用,进而触发相关依赖的更新。Vue会把与这个属性相关的Watcher(观察者对象)加入到一个队列中,然后异步地更新这些Watcher,以确保所有的变动在同一事件循环内一并处理,避免不必要的DOM操作。
对于你的问题,虽然你没有明确指出具体的问题点,但以上内容基本涵盖了Vue响应式原理的主要问题。如果有更具体的疑问,欢迎继续提问。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
