vue模板编译阶段

1. Vue 面试中常问知识点整理

生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期，各个阶段有相对应的事件钩子。

beforeCreate（创建前），在数据观测和初始化事件还未开始
created（创建后），完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来
beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后），在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换 el 属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

注意：
created 阶段的ajax请求与 mounted 请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。
mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 。

初始化组件时，仅执行了 beforeCreate/Created/beforeMount/mounted 四个钩子函数
当改变 data 中定义的变量（响应式变量）时，会执行 beforeUpdate/updated 钩子函数
当切换组件（当前组件未缓存）时，会执行 beforeDestory/destroyed 钩子函数
初始化和销毁时的生命钩子函数均只会执行一次， beforeUpdate/updated 可多次执行

仅当子组件完成挂载后，父组件才会挂载
当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）
父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的
销毁父组件时，先将子组件销毁后才会销毁父组件

组件的初始化（mounted之前）分开进行，挂载是从上到下依次进行
当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行

1、什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2、vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。
5、DOM 渲染在哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter ，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter 。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合 Observer ，Compile和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue中是用来解析 {{}}），最终利用 watcher 搭起observer和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（ input ）—>数据 model 变更双向绑定效果。

js实现简单的双向绑定：

1、父组件与子组件传值
父组件传给子组件：子组件通过 props 方法接受数据；
子组件传给父组件： $emit 方法传递参数
2、非父子组件间的数据传递，兄弟组件传值 eventBus ，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

需求一：
在一个列表页中，第一次进入的时候，请求获取数据。
点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。
也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。
解决方案
在 App.vue设置：

假设列表页为 list.vue ，详情页为 detail.vue ，这两个都是子组件。
我们在 keep-alive 添加列表页的名字，缓存列表页。
然后在列表页的 created 函数里添加ajax请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。
这样就可以解决问题了。

需求二：
在需求一的基础上，再加一个要求：可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。
我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

这个 meta 属性，可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。
设置完这个属性，还要在 App.vue 文件里设置 watch 一下 $route 属性。

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了，统一放在 App.vue 里来处理。
触发请求数据有两个条件：
从其他页面（除了详情页）进来列表时，需要请求数据。
从详情页返回到列表页时，如果详情页 meta 属性中的 isRefresh 为 true ，也需求重新请求数据。
当我们在详情页中删除了对应的列表项时，就可以将详情页 meta 属性中的 isRefresh 设为 true 。这时再返回到列表页，页面会重新刷新。

1、css只在当前组件起作用
答：在 style 标签中写入 scoped 即可 例如： <style scoped></style>
2、v-if 和 v-show 区别
答： v-if 按照条件是否渲染， v-show 是 display 的 block 或 none ；
3、 $route 和 $router 的区别
答： $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

2. 怎么理解VUE，VUE的数据驱动原理是什么，解释

Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。
首先，vuejs在实例化的过程中，会对实例化对象选项中的data
选项进行遍历，遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。同时每一个实例对象都有一个watcher实例对象，他会在模板编译的过程中,用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染这样就实现了所谓的数据对于视图的驱动。通俗地讲，它意味着我们在普通
HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
Vue.js的数据驱动就是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。
Model:指的是数据部分，对应到前端相当于javascript对象
View:指的是视图部分，对应前端相当于dom
Viewmodel:就是连接视图与数据的中间件通讯
数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

3. vue生命周期是多少

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用 ，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

4. vue.js的生命周期有什么用

在之前基础上对组件进行了生命周期的加工(初始化、获取资源、渲染、更新、销毁等)，理顺了组件的各个阶段，有助于对组件实现(从初始化到销毁)的理解。 并且借助于组件各个阶段的钩子可以对组件有更好的利用和扩展。

5. Vue - 组件和Vue.extend

在初学 Vue 的时候,都是利用 cdn 的方式在一个页面中导入 vue.js 的库文件.

接着,肯定就学到了组件开发.

当然,也是在单页面中.

API文档告诉我们

在后来,学到了使用 vue-cli 搭配 .vue 模板的方式开发组件.

好了,三种组件创建的方式说完了,且在各自的环境里都能够正常的运作.

在 Vue 开发中,所有的组件本质上都是由一个继承自 Vue 的构造函数创建的.

比如在注册局部组件时.

从视觉上,我们看到 TodoListComp 只是一个普通的 Object 对象.

直接赋值给了其他组件的 components 属性里.

然后,这个组件就成为了一个局部组件,并可以在注册了当前组件的内部去使用了.

那它在内部做了什么,导致这个普通的对象最后可以被当成是一个正常的组件来使用呢?

比如,普通对象上都没有 $el 之类的属性.丢给 components 之后,就啥都有了.

使用Vue.extend(options)会根据传入的options创建一个VueComponent的组件构造函数并返回.

既然使用 Vue.extend 会返回一个组件的构造函数.

那么我们就可以使用 new 这个返回的构造函数

并手动的 mount 并替换某个 dom 节点(就和 new App() 一样)

前面,我么已经知道了,所有的 vue 组件,不管是全局的还是局部的.

都是利用 Vue.extend 方法构建并返回出一个继承自 Vue 的组件构造函数.

这个函数接受一个满足了 Vue 组件属性项的普通的 Object 对象.

在.vue模板文件开发中,也不例外.

我们可以看看,在书写 .vue 模板文件时,我们到底在写什么?

我们写的是一个 .vue 文件.

并按照 <template></template> <script></script> ( 这里不关注 <style></style> 节点 ) 的格式编写 .vue 文件.

把它整合起来来看.

等价于

好了,继续回到 .vue 模板开发文件中.

在另外一个组件中,使用此组件时,我们会 import xxx from xxx.vue 并搭配 components:{ xxxx }

.vue 会被 webpack 中配置的 vue-loader 处理.这是我们已知的.

结合上述的判断, vue-loader 仅仅只是把 .vue 文件编译成了一个 vue.extend(options) 创建组件所需要的 options 普通对象而已.

既然 vue-loader 仅仅,只是把 .vue 模板文件编译成了一个 options 普通对象.

那么我们可以手动的使用 Vue.extends(options) 来获得这个组件对象的构造函数.

拿到此组件的构造函数,我们就可以在 组件 mounted 的时候,通过 new 的方式,挂在到 html 上了. (而无需去注册到 components,成为一个局部组件.直接把它当成一个自己熟悉的不能在熟悉的构造函数调用即可.)

既然我们已经知道:

我们完全可以直接使用 .js 文件的方式来创建 vue 组件,进而省略 .vue & vue-loader 这个执行的步骤.

此 .js 文件到处一个 vue 组件的构造函数.

在另外一个组件里

通过这样的原理,我们完全可以在HTML页面的任意地方,任意位置,任意的挂在我们自己的组件.并不一定必须使用.vue声明式组件的语法.

[ 码云地址 ]

6. vue生命周期是什么

Vue实例有一个完整的生命周期。

也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

vue生命周期功能总结：

beforecreate：可以在这加个loading事件。

created ：在这结束loading，还做一些初始化，实现函数自执行。

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeDestory： 确认删除vue实例。

destoryed ：当前实例已被销毁，解绑相关指令和事件监听器。

7. Vue 模板编译 是用来代替JSP的吗

JSP可以和Vue一起使用，但vue本身更倾向于基于node的服务端渲染SSR

8. vue生命周期详解

Vue实例完整的生命周期包括：创建、初始化、编译模板、挂在DOM、渲染更新、卸载等过程。

1、beforeCreate( 创建前 )。在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

2、created ( 创建后 ）。实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化。

3、beforeMount。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

4、mounted。挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

5、beforeUpdate。在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

6、updated（更新后）。在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。

7、beforeDestrioy （销毁前）。在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

8、destroyed（销毁后）。在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。

(8)vue模板编译阶段扩展阅读：

vue生命周期功能总结：

beforecreate：可以在这加个loading事件。

created ：在这结束loading，还做一些初始化，实现函数自执行。

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeDestory： 确认删除vue实例。

destoryed ：当前实例已被销毁，解绑相关指令和事件监听器。

9. vue生命周期总共有几个阶段

vue生命周期分为8个阶段，即分别是创建前、创建后、载入前、载入后、更新前、更新后、销毁前、销毁后。VUE是iOS和Android平台上的一款Vlog社区与编辑工具，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活，还可以在社区直接浏览他人发布的Vlog，与Vloggers互动。随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。VUE软件通过点按改变视频的分镜数实现简易的剪辑效果，而剪辑能够让视频传达更多的信息。同时，该软件中有12款滤镜供用户选择，切换至前置摄像头会出现自然的自拍美颜功能。VUE支持40款手绘贴纸，还可以编辑贴纸的出现时间。