mvvm框架
vue:三要素
响应式:vue 如何监听到 data 的每个属性变化?
模板引擎:vue 的模板如何被解析,指令如何处理?
渲染:vue 的模板如何被渲染成 html ?以及渲染过程
响应式
修改 data 属性之后,vue 立刻监听到
data 属性被代理到 vm 上
用defineProperty监听。ie9+可以。一个小demo
var obj={}
var _name='gaozhegng'
Object.defineProperty(obj,'name',{
get:function(){
console.log('get',_name)
return _name
},
set:function(newVal){
console.log('set',newVal)
_name=newVal
}
})
模拟vue的实现,先贴vue的代码
var vm = new Vue({
el: '#app',
data: {
name:'gx',
price: 100
}
})
defineProperty代码
var vm={}
var data={
name:'zhangsan',
age:20
}
var key,value
for(key in data){
(function(key){
Object.defineProperty(vm,key,{
get:function(){
return data[key]
},
set:function(newVal){
data[key]=newVal
}
})
})(key)
}
2》模板是什么???
本质:字符串
有逻辑,如v-if, v-for等
与html格式很像,但有很大区别【比如可以v-for】
最终还要转换为Html显示
最终必须转换成js代码因为:
有逻辑,必须用js才能实现(图灵完备语言)
转换为html渲染页面,必须用js才能实现
因此,模板最重要转换成一个js函数(render函数)