Vue 框架原理相关知识点

时间 2019-12-10 标签 vue 框架原理相关知识点

vue生命周期原理，钩子函数

create和mounted 的区别javascript

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操做无异于徒劳，因此此处必定要将DOM操做的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，由于该钩子函数执行时全部的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操做都不会有问题。css

参考html

MVVM框架的设计理念

为何选择vue

为何使用vue，首先要看和其余框架React/Angular的对比vue

React

React 的特别是使用 JSX，有些人喜欢用，有些人不喜欢？看它的语法就知道java

一个render函数，里面又放html代码，又放 JS 代码。逻辑不能使用 if-else，只能使用一堆三元运算符。 css也能够当成对象属性放进去，揉在一块，虽然最后他们会编译成纯JS，反正我我的是比较喜欢 JS/CSS/HTML 分开写。
过渡的工具依赖

ReactDOM.render(
    <div> <h1>{1+1}</h1> </div>
    ,
    document.getElementById('example')
);

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

ReactDOM.render(
    <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div>
    ,
    document.getElementById('example')
);
复制代码

Vue

特色算法

从React那里借鉴了组件化、prop、单向数据流、性能、虚拟渲染，并意识到状态管理的重要性。
从Angular那里借鉴了模板，并赋予了更好的语法，以及双向数据绑定（在单个组件里）。
它不强制使用某种编译器，因此你彻底能够在遗留代码里使用Vue，并对以前乱糟糟的jQuery代码进行改造。

不足框架

模板的运行时错误描述不够直观
年轻，社区生态不够完善

为何使用框架

参考异步

www.zcfy.cc/article/the…
medium.com/dailyjs/the…
现代 js 框架解决的主要问题是保持 UI 与状态同步。
使用原生 JavaScript 编写复杂、高效而又易于维护的 UI 界面几乎是不可能的。
Web components 并未提供解决同步问题的方案。
使用现有的虚拟 DOM 库去搭建本身的框架并不困难。但并不建议这么作！

双向绑定原理，diff算法内部实现

双向绑定原理：依赖收集、发布订阅函数

vue事件机制

从template转换成真实DOM的实现机制

nextTick原理

官方用法：在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。工具

原理：相似Event-loop 的异步队列，DOM更新是异步的。当即操做data数据DOM不会当即更新，而是等同步任务执行完以后，从异步任务队列中取出异步任务，放到执行栈中执行。

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，若是执行环境不支持，则会采用 setTimeout(fn, 0) 代替。