你应该要知道的vue.js
前言
小组同事最近都在学习前端,目前我们小组前端技术栈主要是vue。在和同事交流过程成,发现他们对vue都不了解,所以整理了问的比较多的问题。
组件data为什么必须是函数?
因为组件可能被多处使用,但它们的data是私有的,所以每个组件都要return一个新的data对象,如果共享data,修改其中一个会影响其他组件
组件通信
- 父子组件通信:
props
、$emit / $on
、provide / inject
(2.2.0 新增,主要为高阶插件/组件库提供用例) - 非父子组件的通信: event bus
- 复杂情况: vuex
怎么动态添加组件
场景:在vue中,点击button,随机生成a、b、c组件中的一个
is
render
思路:设定一个components数组,button点击一次,push一个组件名,v-for
遍历components,并用is
或render
动态生成
下面内容,框架相关:https://zhuanlan.zhihu.com/p/32911022
vue-loader是什么?
vue-loader 是一个 webpack 的 loader,可以将单文件组件转换为 JavaScript 模块
引用文档的说法:
- 默认支持
ES2015
; - 允许对 Vue 组件的组成部分使用其它
webpack loader
,比如对<style>
使用Sass
和对<template>
使用Jade
; .vue
文件中允许自定义节点,然后使用自定义的 loader 进行处理;- 把
<style>
和<template>
中的静态资源当作模块来对待,并使用webpack loader
进行处理; - 对每个组件模拟出 CSS 作用域;
- 支持开发期组件的热重载。
实现 Vue SSR基本原理
主要通过vue-server-renderer
将Vue组件输出成HTML,过程:
- 客户端 entry-client 主要作用挂载到 DOM 上,服务端 entry-server 除了创建和返回实例,还进行路由匹配与数据预获取
- webpack打包客户端为client-bundle,打包服务端为server-bundle
- 服务器接收请求,根据 url 来加载相应组件,然后生成 html 发送给客户端
- 客户端激活, Vue 在浏览器端接管由服务端发送的静态 HTML,使其变为由 Vue 管理的动态 DOM,为确保混合成功,客户端与服务器端需要共享同一套数据。在服务端,可以在渲染之前获取数据,填充到 stroe 里,这样,在客户端挂载到 DOM 之前,可以直接从 store 里取数据。首屏的动态数据通过 window.INITIAL_STATE 发送到客户端
数据双向绑定原理
实现数据绑定的常见做法:
Object.defineProperty
:劫持各个属性的setter
,getter
- 脏值检测:通过特定事件进行轮循
- 发布/订阅模式:通过消息发布并将消息进行订阅
vue采用的是数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来实现对属性的劫持,并在数据变动时发布消息给订阅者,使其触发相应的监听回调。
具体步骤:
1、 实现Observer
将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter
和getter
。实现一个消息订阅器,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法
2、 实现Compile
compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
3、 实现Watcher
Watcher订阅者是Observer和Compile之间通信的桥梁
主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个update()方法
- 待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
4、 实现MVVM
MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果
对Vue.js的template编译的理解
template会被编译成AST语法树,AST会经过generate得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点
- parse 过程,将 template 利用正则转化成 AST 抽象语法树。
- optimize 过程,标记静态节点,后 diff 过程跳过静态节点,提升性能。
- generate 过程,生成 render 字符串
司徒大佬有一篇很好的文章:前端模板的原理与实现
vue 为什么采用Virtual DOM
?
一方面是出于性能方面的考量:
- 创建真实DOM的代价高:真实的 DOM 节点 node 实现的属性很多,而 vnode 仅仅实现一些必要的属性,相比起来,创建一个 vnode 的成本比较低。
- 触发多次浏览器重绘及回流:使用 vnode ,相当于加了一个缓冲,让一次数据变动所带来的所有 node 变化,先在 vnode 中进行修改,然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改,以减少浏览器的重绘及回流
但是性能受场景的影响是非常大的,不同的场景可能造成不同实现方案之间成倍的性能差距,所以依赖细粒度绑定及 Virtual DOM
哪个的性能更好不是一个容易下定论的问题。更重要的原因是为了解耦HTML
依赖,这带来两个非常重要的好处是:
- 不再依赖 HTML 解析器进行模版解析,可以进行更多的 AOT 工作提高运行时效率:通过模版 AOT 编译,Vue 的运行时体积可以进一步压缩,运行时效率可以进一步提升;
- 可以渲染到 DOM 以外的平台,实现 SSR、同构渲染这些高级特性,Weex 等框架应用的就是这一特性。
综上,Virtual DOM
在性能上的收益并不是最主要的,更重要的是它使得 Vue 具备了现代框架应有的高级特性。
diff算法
这部分比较复杂,不好懂,推荐一篇不错的文章:
解析vue2.0的diff算法
vue 和 react 区别
相同点:
- 都支持
SSR
- 都有
Virtual DOM
- 组件化开发
- 数据驱动
- ...
不同点:
- vue推荐的是使用 webpack + vue-loader 的单文件组件格式,React 推荐的做法是 JSX + inline style
- vue 的
Virtual DOM
是追踪每个组件的依赖关系,不会渲染整个组件树,react 每当应该状态被改变时,全部子组件都会 re-render - ...
vue的优点是什么?
- 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
- 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
- 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。
- 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。
参考文章:https://github.com/Alvin-Liu/Blog/issues/13
你应该要知道的vue.js的更多相关文章
- 你应该知道的Vue高级特性
本文使用的Vue版本:2.6.10 Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- react.js 你应知道的9件事
React.js 初学者应该知道的 9 件事 本文假定你已经有了一下基本的概念.如果你不熟悉 component.props 或者 state 这些名词,你最好先去阅读下官方起步和手册.下面的代码 ...
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- 搭建Vue.js开发环境(window10)
我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...
- 比官方文档更易懂的Vue.js教程!包你学会!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...
- 包学会之浅入浅出 Vue.js:开学篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...
- 包学会之浅入浅出Vue.js:开学篇(转)
包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
- 包学会之浅入浅出Vue.js:开学篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...
随机推荐
- Day3-2 函数之递归
递归 定义:一个函数在 内部调用自己,就称为递归. # 如何让10不停的除以2,直到不能除为止. n = 10 while True: n = int(n /2) print(n) if n == 0 ...
- 2.请介绍一下List和ArrayList的区别,ArrayList和HashSet区别
第一问: List是接口,ArrayList实现了List接口. 第二问: ArrayList实现了List接口,HashSet实现了Set接口,List和Set都是继承Collection接口. A ...
- checkbox保存和赋值
//货物信息中的表格内容 $.each(trG.find('td input,td select'),function(i,inp){ if($(inp).attr('type')=='checkbo ...
- Java连接RabbitMQ之创建连接
依赖包: <dependencies> <dependency> <groupId>junit</groupId> <artifactId> ...
- github---无命令可视化界面操作
最近工作需要,研究了一下git,这个东西挺实用,给我的感觉并不是那么简单使用,我认为还可以再深入的研究一下,挺好玩的~ 说一下我的学习路线: 1.先看的廖老师的博客:https://www.liaox ...
- Nintex using javascript
- poj-2001(字典树)
题意:给你一堆字符串,我们定义一个字符串可以被缩写成一个字符串(必须是原字符串的前缀),问你每个字符串能辨识的前缀是什么,不能辨识意思是(ab,abc我们缩写成ab): 解题思路:可以用字典树解决,我 ...
- 数据库中事务的四大特性(ACID)
本篇讲诉数据库中事务的四大特性(ACID),并且将会详细地说明事务的隔离级别. 如果一个数据库声称支持事务的操作,那么该数据库必须要具备以下四个特性: ⑴ 原子性(Atomicity) 原子性是指事务 ...
- Docker自制CentOS镜像
系统环境:CentOS 7.3 将yum源切换到阿里源 可以直接写成一个脚本 #!/bin/sh mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...
- Spring模块介绍
GroupId ArtifactId 说明 org.springframework spring-beans Beans 支持,包含 Groovy org.springframework spring ...