vue 数据双向绑定原理:
Vue2.0采用 数据劫持 结合 发布者-订阅者 模式的方式实现。
核心就是通过Object.defineProperty()方法劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
需要Observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter。给这个对象的某个值赋值,就会触发setter,那么就能监听到数据变化。
Compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有了变动,收到通知,更新数据。
Watcher 订阅者是 Observe 和 Compile 之间通信的桥梁,主要做的事情有:
在自身实例化时往属性订阅器(dep)里面添加自己;
自身必有一个update() 方法;
待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile中绑定的回调。
MVVM作为数据绑定的入口,整合 Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile 之间的桥梁,达到数据变化 =>视图更新;视图交互变化=>数据model变更的双向绑定效果。
受defineProperty限制,Vue无法检测对象属性的删除和添加。所以可以利用Vue提供的 Vue.set() 来解决此问题。
js实现简单的双向绑定:
<body>
<div id="app">
<input type="text" id="txt"/>
<p id="show"></p>
</div>
<script>
window.onload = function(){
let obj = {};
window.obj = obj;
Object.defineProperty(obj, "txt", {
get: function () {
return obj;
}
set: function(newValue) {
document.getElementById("txt").value = newValue;
document.getElementById("show").innerHTML = newValue;
}
})
document.addEventListener("keyup", function(e){
obj.txt = e.target.value;
})
}
</script>
</body>
Object.defineProperty()有什么缺点?Vue3.0为什么用的Proxy?
Object.defineProperty()进行双向数据绑定时,告知用户是可以监听数组的,但只是监听了数组的push()、pop()、shift()、unshift()、sort()、reverse()这八种方法,其他数组的属性检测不到。
Object.defineProperty() 无法监控到数组下标的变化,导致通过数组下标添加元素,不能实时响应。
Object.defineProperty() 只能劫持对象的属性,因此对每个对象的属性进行遍历时,如果属性值也是对象需要深度遍历,那么就比较麻烦了,所以在比较Proxy能完整劫持对象的对比下,选择Proxy。
Proxy不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。
Vue模板渲染的原理是什么:
Vue中模板Template无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的HTML语法,所以需要将template转化成一个Javascript函数,这样浏览器就可以执行这一个函数并渲染出对应的HTML元素。这样转化的过程就是模板编译。
模板编译分三个阶段:解析parse, 优化optimize, 生成generate,最终生成可执行函数render。
· 解析 parse 阶段: 使用大量的正则表达式对template字符串进行解析,将标签、指令、属性等转化为抽象语法树AST。
· 优化 optimize 阶段: 遍历AST,找到其中的一些静态节点并进行标记,方便在页面重新渲染的时候进行diff比较时,直接跳过这一些静态节点,优化runtime的性能。
· 生成 generate阶段:将最终的AST转化为render函数字符串。
完整的Vue路由生命周期
导航被触发;
在失活的组件里调用离开守卫;
调用全局的 beforeEach 守卫;
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+);
在路由配置里面调用beforeEnter;
解析异步路由组件;
在被激活的组件里调用 beforeRouteEnter;
调用全局的 beforeResolve 守卫(2.5+);
导航被确认;
调用全局的afterEach钩子;
触发DOM更新;
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
nextTick的更新原理:
Vue在修该数据后,视图不能立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
nextTick的回调函数会等到同步任务执行完毕,DOM更新后才触发。
MVVM开发模式的理解:
· M model: 数据模型层,保存页面中的数据;
· V view: 视图层,页面数据的展示;
· VM viewModel: M和V的调度者,双向数据绑定,通过监听model 数据的改变来控制view的更新,处理用户交互操作。
M 数据改变 => VM => 触发View 更新
V 用户操作=> VM => M 数据同步更新
SPA缺点:
· 不利于SEO;
· 首屏渲染时间过长
Vue 优化首页加载速度?首页白屏?
· 将公用的JS库通过script标签外部引入,减小app.bundle的大小,浏览器并行下载资源文件,提高下载速度;
· 配置路由时,页面和组件使用懒加载的方式引入,进一步缩小app.bundle的体积,再调用某个组件时再加载对应的js文件;
· 使用骨架屏或者loading动画,提升用户体验;
· 图片资源压缩,icon资源使用雪碧图;
· 开启gizp压缩;gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css、json数据都可以压缩。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减少网络传输的流量大小;
· webapck相关配置优化;
使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件;生产环境关闭源码映射,一方面能减少代码包的大小,另一方面也有利于系统代码安全;清除打印日志和debugger信息;配置SplitChunks 抽取公有代码,提升你的应用的性能。
2. 使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件。
· 前端代码层面的优化;
· 使用CDN加载资源;
· UI插件按需引入加载;
Vue2.0 和Vue3.0的区别:
重构响应式系统,使用Proxy替换object.defineProperty:
Proxy可直接监听数组类型的数据变化;
Proxy 监听的目标为对象本身,不需要再去遍历每个属性,有一定的性能提升;
Proxy 可拦截apply、ownKeys 、has等13种方法,而object.defineProperty不行;
Proxy 直接实现对象属性的新增和删除。
新增Composition API, 更好的逻辑复用和代码组织;
重构 Virtual DOM:
模板编译时的优化,将一些静态节点编译成常量;
slot的优化,将slot编译为lazy函数,将slot的渲染的决定权交给子组件;
模板中内联事件的提取并重用(原本每次渲染都重新生成内联函数);
代码结构调整,更便于 Tree shaking,使得体积更小;
使用 TypeScript 替换Flow。
Composition API :
Vue2.0中,随着功能的增加,组件变得越来越复杂化,难以维护,而难以维护的根本原因是Vue的API设计迫使开发者使用watch,computed,methods选项组织代码,而不是实际的业务逻辑。
另外Vue2.0中缺少一种较为简洁的低成本的机制来完成逻辑复用,虽然可以minxis完成逻辑复用,但是当mixin变多的时候,会使得难以找到对应的data,computed或者methods来源于哪个mixin,使得类型推断难以进行。
所以Composition API的出现,主要也是为了解决Option API带来的问题。
第一个是代码组织。Composition API可以让开发者根据业务逻辑组织自己的代码,让代码具备更好的可读性和可拓展性。
第二个是实现代码的逻辑提取和复用。多个mixin的property存在变量命名冲突的风险,而composition API 刚好解决了这个问题。
SSR原理:
在客户端请求服务器的时候,服务器到数据库中获取到相关的数据,并在服务器内部将Vue组件渲染成HTML,并且将数据、HTML一并返回给客户端,这个在服务器将数据和组件转化为HTML的过程就叫做服务器渲染SSR。
而当客户端拿到服务器渲染的HTML和数据之后,由于数据已经有了,客户端不需要再一次请求数据,而只需要将数据同步到组件或Vuex内部即可。除了数据以外,HTML结构也有了,客户端在渲染组件的时候,也只需要将HTML的Dom节点映射到Virtual DOM即可,不需要重新创建新的DOM节点,这个将数据和HTML同步的过程,又叫做客户端激活。
使用SSR的优点:
有利于SEO:有利于爬虫来爬取页面,因为部分页面爬虫是不支持执行JavaScript的,这种不支持执行js的爬虫抓取到的非SSR的页面会是一个空的HTML页面,有了SSR后,爬虫可以获取到完整的HTML结构的数据,进而收录到搜索引擎中。
白屏时间更短:相当于客户端渲染,服务端渲染在浏览器请求URL之后已经得到 一个带有数据的HTML文本,浏览器只需要解析HTML,直接构建DOM树即可。而客户端渲染 ,需要先得到一个空的HTML页面,这个时候页面已经进入白屏了,之后还需要经过加载并执行js、请求后端服务器获取数据,js渲染页面几个过程才可以看到最后的页面。特别是在复杂的应用中,由于需要加载js脚本,越是复杂的应用,需要加载的js脚本就越多,越大,这导致应用的首屏加载时间非常长,进而降低用户体验感。