vue三要素
- 响应式：vue 如何监听到 data 的每个属性变化？
-
模板引擎：vue 的模板如何被解析，指令如何处理？
- 渲染：vue 的模板如何被渲染成 html ？以及渲染过程
模板是什么
- 本质
vue中，template中的代码，字符串 - 有逻辑处理 有v-if v-for等，
很多后才程序有模板，之前的web开发模板都在后台处理 - 和html很像
但是浏览器压根不认识，根本不是html，最终要转化成html的样子 - 模板必须转为js代码
有逻辑处理，html js css只有js能够处理逻辑
同时将模板转化成字符串渲染html成为页面，必须要js才能实现 - js的渲染函数 -- render函数
说一说with vue中有用到（大佬们都说，开发中尽量不要用with）
为什么要用with 以为可以使得代码更加简洁，不用写外面的对象
with .png
vue render 函数
模板字符串会被转化成右边的with函数
模板中所有的信息包含在render函数中，this就是vm实例，vnode
image.png
vue 中render函数源码
搜索coder.render
image.png
image.png
大致逻辑 模板-render函数
对应图
image.png
工具化的细节，只要知道大概逻辑即可
template模板-html parser处理 - 抽象语法数--生成函数体字符串-通过new Function生成函数
vue 2.0 开始支持预编译
我们要知道的，模板和render函数的对应关系是怎么样的，具体模板怎么变成render函数的，会用工具就ok
双向数据绑定的原理
注意，双向数据绑定和响应式的区别
- 输出：input输入触发render函数input事件，改变vm实例的title
- 赋值：title属性改变，，通过directives或者domprops把改动相应到input中
data中的属性methods中的方法都会绑定到对应的vm实例上面
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
// data 独立
var data = {
title: '',
list: []
}
// 初始化 Vue 实例
var vm = new Vue({
el: '#app',
data: data,
methods: {
add: function () {
this.list.push(this.title)
this.title = ''
}
}
})
with(this) {
return _c('div', {
attrs: {
"id": "app"
}
}, [_c('div', [_c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (title),
expression: "title"
}],
domProps: {
"value": (title)
},
on: {
"input": function($event) {
if ($event.target.composing) return;
title = $event.target.value
}
}
}), _v(" "), _c('button', {
on: {
"click": add
}
}, [_v("submit")])]), _v(" "), _c('div', [_c('ul', _l((list), function(item) { // _l是一个数组 （list）对list进行了遍历
return _c('li', [_v(_s(item))])
}))])])
}
v-for
根据上面的代码，其实v-for在render函数中返回的 就是一个函数
_l((list), function(item) { // _l是一个数组 （list）对list进行了遍历
return _c('li', [_v(_s(item))])
}))])
image.png
v-if
其实就是一个判断
🤠你的鼓励对我很重要，会激励我写出更加优秀的文章🤠
鼓励.png
