介绍 vue是什么 Vue2.0/3.0双向数据绑定的实现原理
& lt; body>
,,,姓名:
,,,& lt; span id=皀ame"祝辞& lt;/span>
,,,& lt; br /比;
,,,& lt; input 类型=皌ext", id=癷nputName",/比;
& lt;才能/body> , & lt; script>
,,,,,let obj ={
,,,,,,,,,名字:& # 39;& # 39;
,,,,,}
,,,,,Object.defineProperty (obj, & # 39;名字# 39;,{
,,,,,,,,,得到(){
,,,,,,,,,,,,,,,return this.name ,,,//注意错误示范,不可以用却;能够形成死循环,要准备一个新的值
,,,,,,,,,},
,,,,,,,,,设置(val) {
,,,,,,,,,}
,,,,,})
& lt;才能/script> & lt; script>
,,,,,let obj =, {
,,,,,名字:,““
,,,};
,,,let newObj =, JSON.parse (JSON.stringify (obj));
,,,Object.defineProperty (obj,“name",, {
,,,,,得到(),{
,,,,,,,return newObj.name;
,,,,,},
,,,,,设置(val), {
,,,,,,,if (val ===, newObj.name),返回,,//增加判断优化性能,判断新值与旧值是否一样,一样就返回,,不一样的话的再次赋值
,,,,,,,newObj.name =, val;
,,,,,,,观察者();
,,,,,}
,,,});
,,,//,,,重新赋值的方法
,,,function 观察者(),{
,,,,,spanName.innerHTML =, newObj.name;,//获取obj.name的值
,,,,,inputName.value =, newObj.name;
,,,}
,,,观察者();,//开始就执行一次
,,,setTimeout((),=祝辞,{
,,,,,obj.name =,“大左“;
,,,},,1000);
& lt;才能/script> inputName.oninput =,()函数,{
,,,,,obj.name =, this.value;
,,,}, Vue2.0不足之处
数据(){
返回{
obj: {}
}
}
this.obj.name=& # 39; xxx # 39;,,//这个操作行不通,,因为刚开始的时候obj里面没有名字所以就没有进行监听,都是以上第二条造成的 3.0的特点以及好处
, & lt; script>
,,,let obj =, {};
,,,obj =, new 代理(obj, {
,,,,,得到(目标,,道具),{
,,,,,,,console.log (“D");
,,,,,,,return 目标(道具);
,,,,,},
,,,,,设置(目标,道具,,值),{
,,,,,,,console.log (“Z");
,,,,,,,目标[支持],=,价值;
,,,,,}
,,,});,//监听整个对象,不需要指定属性,相当于把对象里所有的属性都监听了,So 直接写整体的set
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关Vue2.0/3.0双向数据绑定的实现原理是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
Vue2.0/3.0双向数据绑定的实现原理
双向数据绑定简意即数据的改变能让页面重新渲染
Vue2.0 ES5的原理:
Object.defineProperty对数据进行拦截
简单小案例
改变输入框的值让跨度里面的值随之改变数据的改变可以让视图
正确写法
执行逻辑
1。setTimeout执行1秒后修改数据触发obj.name的设置(val)
2。拿到最新的值给到newObj.name执行观察者()方法
3。拿到最新的值赋值spanName。innerHTML=newObj.name;inputName。值=https://www.yisu.com/zixun/newObj.name;
输入框的值改变跨框的值随着改变
这个操作在Vue里面叫v模型
Vue2.0不足之处
1。需要对原始数据进行克隆不然死循环上面有提到
2。如果我们想给对象中的数据进行获取和设置的拦截就要一个个设置对象中的属性都要单独的监听一下如果有多个就要循环遍历了分别来监听了
反看vue2.0中数据的
好吧那我们再看一下
3.0的特点以及好处
主要用到了SE6里面的代理
