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