We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
该篇文章主要对Vue中应该要掌握的知识点的一些整理。只是一个引子,并没有过多的深入,但是希望能根据这篇文章从各个点对Vue有一个更好的了解,对自己有一个更好的定位。只会用API的前端不是好的程序员。
因为组件可能被多处使用,但它们的data是私有的,所以每个组件都要return一个新的data对象,如果共享data,修改其中一个会影响其他组件
props
$emit / $on
provide / inject
场景:在vue中,点击button,随机生成a、b、c组件中的一个
is
render
思路:设定一个components数组,button点击一次,push一个组件名,v-for遍历components,并用is或render动态生成
v-for
vue-loader 是一个 webpack 的 loader,可以将单文件组件转换为 JavaScript 模块
引用文档的说法:
ES2015
webpack loader
<style>
Sass
<template>
Jade
.vue
主要通过vue-server-renderer将Vue组件输出成HTML,过程:
vue-server-renderer
实现数据绑定的常见做法:
Object.defineProperty
setter
getter
vue采用的是数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来实现对属性的劫持,并在数据变动时发布消息给订阅者,使其触发相应的监听回调。
Object.defineProperty()
具体步骤:
1、 实现Observer
将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter。实现一个消息订阅器,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法
2、 实现Compile
compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
3、 实现Watcher
Watcher订阅者是Observer和Compile之间通信的桥梁
主要做的事情是:
4、 实现MVVM
MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果
参考:剖析Vue原理&实现双向绑定MVVM
template会被编译成AST语法树,AST会经过generate得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点
司徒大佬有一篇很好的文章:前端模板的原理与实现
Virtual DOM
一方面是出于性能方面的考量:
但是性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及 Virtual DOM哪个的性能更好不是一个容易下定论的问题。更重要的原因是为了解耦HTML依赖,这带来两个非常重要的好处是:
HTML
综上,Virtual DOM 在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。
这部分比较复杂,不好懂,推荐一篇不错的文章: 解析vue2.0的diff算法
相同点:
SSR
不同点:
The text was updated successfully, but these errors were encountered:
赞
Sorry, something went wrong.
Provide/Inject 呢
@zhangchen91 好的,谢谢提醒
不错的文章,谢谢~
No branches or pull requests
组件data为什么必须是函数?
因为组件可能被多处使用,但它们的data是私有的,所以每个组件都要return一个新的data对象,如果共享data,修改其中一个会影响其他组件
组件通信
props
、$emit / $on
、provide / inject
(2.2.0 新增,主要为高阶插件/组件库提供用例)怎么动态添加组件
场景:在vue中,点击button,随机生成a、b、c组件中的一个
is
render
思路:设定一个components数组,button点击一次,push一个组件名,
v-for
遍历components,并用is
或render
动态生成vue-loader是什么?
vue-loader 是一个 webpack 的 loader,可以将单文件组件转换为 JavaScript 模块
引用文档的说法:
ES2015
;webpack loader
,比如对<style>
使用Sass
和对<template>
使用Jade
;.vue
文件中允许自定义节点,然后使用自定义的 loader 进行处理;<style>
和<template>
中的静态资源当作模块来对待,并使用webpack loader
进行处理;实现 Vue SSR基本原理
主要通过
vue-server-renderer
将Vue组件输出成HTML,过程:数据双向绑定原理
实现数据绑定的常见做法:
Object.defineProperty
:劫持各个属性的setter
,getter
vue采用的是数据劫持结合发布者-订阅者模式的方式,通过
Object.defineProperty()
来实现对属性的劫持,并在数据变动时发布消息给订阅者,使其触发相应的监听回调。具体步骤:
1、 实现Observer
将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上
setter
和getter
。实现一个消息订阅器,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法2、 实现Compile
compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
3、 实现Watcher
Watcher订阅者是Observer和Compile之间通信的桥梁
主要做的事情是:
4、 实现MVVM
MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果
参考:剖析Vue原理&实现双向绑定MVVM
对Vue.js的template编译的理解
template会被编译成AST语法树,AST会经过generate得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点
司徒大佬有一篇很好的文章:前端模板的原理与实现
vue 为什么采用
Virtual DOM
?一方面是出于性能方面的考量:
但是性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及
Virtual DOM
哪个的性能更好不是一个容易下定论的问题。更重要的原因是为了解耦HTML
依赖,这带来两个非常重要的好处是:综上,
Virtual DOM
在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。diff算法
这部分比较复杂,不好懂,推荐一篇不错的文章:
解析vue2.0的diff算法
vue 和 react 区别
相同点:
SSR
Virtual DOM
不同点:
Virtual DOM
是追踪每个组件的依赖关系,不会渲染整个组件树,react 每当应该状态被改变时,全部子组件都会 re-rendervue的优点是什么?
The text was updated successfully, but these errors were encountered: