虚拟dom是什么?
虚拟dom就是经过js对象来模拟描述dom树,包括tag,attr, children等属性来表明标签名,属性,子元素等。因为不须要有操做dom的方法,因此比真实的dom轻量不少。 vue虚拟dom是依赖于一个开源库snabbdom.js来扩展实现的。 ,映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch 等过程。
为何vue要使用虚拟dom?
1.直接频繁的操做真实的dom引发浏览器重排重绘,性能很差。虚拟dom能够经过diff算法快速的计算出变更的地方,有针对性的修改真实的dom。
2.实现数据映射到视图 3.虚拟dom是js对象描述的,能够跨平台应用,而真实的dom只能在浏览器被识别。
2 vue的数据驱动vue
Vue.js 一个核心思想是数据驱动。所谓数据驱动,是指视图是由数据驱动生成的,咱们对视图的修改,不会直接操做 DOM,而是经过修改数据。它 相比咱们传统的前端开发,如使用 jQuery 等前端库直接修改 DOM,大大简化了代码量。
特别是当交互复杂的时候,只关心数据的修改会让代码的逻辑变的很是清晰,由于 DOM 变成了数据的映射,咱们全部的逻辑都是对数据的修改,而不用碰触 DOM,这样的代码很是利于维护。
3 vue的数据渲染到视图的过程node
compile将template模板render为vnode,经过patch生成为真实的dom
4 说说vue的生命周期git
每一个 Vue 实例在被建立以前都要通过一系列的初始化过程。例如须要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。
同时在这个过程当中也会运行一些叫作生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们本身的代码。 beforeCread钩子是在vue初始化数据以前调用的,此时取不到props data等值 created 钩子是在vue初始化数据和监听函数以后调用的,此时能拿到props data等值。 beforeMount 是在render渲染vvnode以前调用的,此时未挂载到$el上。 mounted 是在渲染完vnode,获得真实dom并挂载到$el身上后调用的,此时能拿到真实的dom beforeUpdate 是实例的数据发生变化,未渲染到页面以前调用的。 updated是数据发生变化并完成视图更新后调用的 beforeDestroy 组件销毁以前调用 destroyed 组件销毁以后调用的,此时已经注销掉全部监听事件和数据,可是页面的真实dom依旧保留着。
5 深刻vue的响应式原理github
响应式对象,核心就是利用 Object.defineProperty 给数据添加了 getter 和 setter。 目的就是为了在咱们访问数据以及写数据的时候能自动执行一些逻辑:getter 作的事情是依赖收集,setter 作的事情是派发更新。
6 说说nextTick算法
vue的据的变化到 DOM 的从新渲染是一个异步过程,发生在下一个 tick。因此一旦咱们想要获取到数据变化后的dom,须要在vm.$nextTick()以后去获取
7 computed 和watch 有什么区别浏览器
计算属性本质上是 computed 加 watcher,而侦听属性本质上是 user watcher。 就应用场景而言,计算属性适合用在模板渲染中,某个值是依赖了其它的响应式对象甚至是计算属性计算而来;而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。