vue实现的步骤是什么-创新互联
这篇文章给大家分享的是有关vue实现的步骤是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
Vue是当今热门的框架，他可以进行数据双向绑定，为什么vue会大受欢迎，我知道的原因大致如下？
1.传统改变dom结构的操作是非常浪费性能的操作（就是慢）
2.把dom结构改变的逻辑放在js层来做可以提高性能。
3.数据和视图的分离更符合面向对象的编程，mvvm
vue的实现也是和react一样用虚拟dom来实现的，至于什么是虚拟dom，就是用js通过模板渲染而成的dom。
vue实现的步骤大概是这三步：
1、响应式：vue怎么监听到dota的每个属性值的变化？
2、模板引擎：vue的模板如何解析的，指令是如何处理的？
3、模板渲染：如何把data里的数据加入模板并渲染成html？
第一步:响应式
响应式的实现主要是依靠一个对象的方法:
Object.defineProperty
这个方法能够监听对象中属性的变化而进行逻辑处理
dome如下：
var obj={}
var _name ='zhangsan'
Object.defineProperty(obj,'name',{
get:function() {
console.log('get')
return _name
},
set: function(newVal) {
console.log('set')
_name=newVal
}
})这里你改变name的值或者访问name的值就会有打印信息
而在vue中模拟实现，大概是这样的：
var vm ={}
var data={name:'张三',age:20}
var key,value;
for(key in data) {
(function(key){
Object.defineProperty(vm,key,{ //绑定到vm上
get:function(){
console.log('get')
return data[key];
},
set:function(newVal){
console.log('set');
data[key]=newVal
}
})
})(key) //闭包处理
}其实学过java的同学肯定对这个不陌生，java的类里面可以直接生成get和set方法
第二步：解析模板
模板必须要转化成js代码，因为:
1.逻辑判断(v-if,v-for),必须要用js才能实现.
2.虚拟dom的渲染，必须要使用js才能实现。(render函数)
模板1
{{price}}
模板1转化的render
with(this) { //this就是vm
return _c(
'p',
{
attrs:{'id':'app'}
},
[
// _c是createElement
// _v是createTextVNode
// _s是toString方法
_c('p',[_v(_s(price))])
]
)
}模板2
- {{item}}
模板2转化的render
with (this) {
return _c(
'p',
{ attrs: { "id": "app" } },
[
_c(
'p',
[
_c(
'input',
{
//指令
directives: [
{
name: "model",
rawName: "v-model",
value: (title), //vm.title
expression: "title"
}
],
domProps: {
"value": (title) //vm.title
},
on: {
"input": function ($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}
),
_v(" "),
_c(
'button',
{
on: { "click": add } //vm.add
},
[
_v("submit")
]
)
]
),
_v(" "),
_c(
'p',
[
_c(
'ul',
_l(
(list), function (item) {
return _c(
'li',
[
_v(_s(item))
]
)
}
)
)
]
)
]
)
}这就是用于渲染的render函数
第三步：把模板加上数据渲染成html
vm._update(Vnode) {
const prevVonde=vm._Vnode
vm._Vnode=Vnode;
if(!prevVnode) { //如果没有之前的vnode，第一次渲染
vm.$el=vm._patch_(vm.$el,Vnode)
}else {
vm.$el=vm._patch_(prevVnode,Vnode)
}
}
function updataComponent() {
//vm._reander就是解析模板的rende函数，返回了一个vnode
vm._update(vm._render())
}这里的vm_.patch_里面就是复杂的diff算法了。根据dom的差别来渲染，里面使用来很多的递归调用，而且里面最要涉及到很多效率问题，天下武功为快不破嘛。
感谢各位的阅读！关于vue实现的步骤是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页题目：vue实现的步骤是什么-创新互联
链接地址：http://scjbc.cn/article/ceseip.html
