vue数据绑定原理

简介:
<body>
<h1> {{title}} </h1>
<p> {{title}} </p>
<p> {{num}} </p>

<script>
// var title = "hello";
// var num = 10;
// vue中数据绑定是通过set,get属性实现的,
// 所以不支持es5的浏览器就不能甩vue

// 在组件配置对象中的data中的数据,在组件创建时,都会被作为set,get属性添加到组件对象上,在set方法中进行了组件的重新渲染,所以每当data中的数据发生变化,页面就会立刻重新渲染。
function initAttr (){

let title ;
let num ;
Object . defineProperty ( window , "title" ,{
set ( v ){
title = v ;
render ();
},
get (){
return title ;
}
})

Object . defineProperty ( window , "num" ,{
set ( v ){
num = v ;
render ();
},
get (){
return num ;
}
})
}
initAttr ();
var sourceBody = document . body . innerHTML ;




function render () {
// document.body.innerHTML
let reg = / \{\{ ( \w + ) \}\} / g ;

let content = sourceBody ;

let arr ;
while ( arr = reg . exec ( content )) {
console . log ( arr );
content = content . replace ( arr [ 0 ], window [ arr [ 1 ]])

};
document . body . innerHTML = content ;
// content.replace(reg,)
}
render ();
title = "hello" ;
num = 10 ;

setTimeout (() => {
num = 100 ;
render ();
}, 2000 );
< /script>
</body>
相关文章
|
5天前
|
JavaScript
|
4天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
4天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
21 2
|
6天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
6天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
6天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
19 1
|
2月前
|
JavaScript 前端开发 开发者
vue 的双向数据绑定的原理
vue 的双向数据绑定的原理
48 0
|
8月前
|
存储 设计模式 JavaScript
简单小示例彻底搞明白vue双向数据绑定核心原理
vue 很大的一个优势就是双向数据绑定,而在 react 或小程序中是需要我们自己手动 setState、setData 去修改视图数据
57 0
|
JavaScript 前端开发
vue相关面试题2:1.封装vue组件作用;2双向数据绑定原理;3.Router 是什么;4.导航钩子有哪些
它们有以下参数。 ●to::即将要进入的目标路由对象。 ●from:当前导航正要离开的路由。 ●next: 一定要用这个函数才能到达下一个路由,如果不用就会遭到拦截。
251 0
|
6天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
20 6