Vue 组件 data 为什么必须是函数、自定义指令、assets和public、Virtual DOM、

Vue 组件 data 为什么必须是函数？

• 1.data 是一个函数，这样每复用一次组件，就会返回一份新的data,类似于一个私有的数据空间，让各个组件实例维护各自的数据。
• 2.对象的形式，就使得所有组件实例共用了一个数据源，会造成一个问题，其中一个变化全都变化的结果。

自定义指令

• 1.全局注册

Vue.directive('focus',{
	//当被绑定的元素插入到 DOM 中时...
	inserted:function(el){
		//聚焦元素
		el.focus()
	}
}

• 2.局部注册

directives:{
	focus:{
		//指令定义
		inserted:function(el){
			el.focus()	
		}	
	}
}

nextTick 的作用

• 1.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

$route 和 $router 的区别

• $router 为 VueRouter 实例。想要导航到不同 URL,则使用 $router.push 方法
• $route 为当前 router 跳转对象里面可以获取 name、path、query、params 等

vue-cli生成的项目文件夹assets和public（static） 的区别

• 相同点：assets和public都是存放静态资源的文件。项目所需要的静态文件、图片、样式、文件都可以放在这两个文件夹下
• 不同点：在 assets中存放的静态资源，在项目打包时会将这些静态资源与代码、index.html文件一起一同进行打包压缩，上传到服务器
• 在public(static) 中存放的静态资源，不会被打包压缩格式化等流程，而是直接进入打包好的目录，直接上传到服务器。

DOM渲染在哪个周期中已经完成

在mounted 中

Virtual DOM (虚拟Dom是什么)

• 是一颗以 JavaScript对象(VNode节点)作为基础的树，用对象属性来描述节点，实际上它是一层对真实DOM的抽象。最终可以通过一系列操作使这课树映射到真实的DOM上。

<ul id='list'>
	<li class='item'>Item1 1</li>
	<li class='item'>Item2 1</li>
	<li class='item'>Item3 1</li>
</ul>
// 虚拟DOM
var element = {
	tagName:'ul',// 节点标签名
	props:{// DOM的属性，用一个对象存储键值对
		id:'list'	
	},
	children:[ // 该节点的子节点
		{tagName:'li',props:		{class:'item'},children:["Item1"]},
		{tagName:'li',props:{class:'item'},children:["Item2"]},
		{tagName:'li',props:{class:'item'},children:['Item3']}
	]
}

为何需要Virtual DOM？

• 具备跨平台的优势：由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使他具有了跨平台的能力，比如说浏览器平台、Weex、Node等。
• Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。js只操作内存(虚拟DOM) ，最后的时候再把变更写入(DOM)
• 提升渲染性能， 虚拟DOM 的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

Virtual DOM 的diff算法

• 虚拟dom 因为是纯粹的JS对象，所以操作它会很高效，但是 Virtual DOM 的变更最终转换成DOM操作，为了实现高效的DOM操作，一套高效的虚拟DOM diff 算法显的很有必要。

包括以下几个步骤：

• 用JS对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，插到文档中。
• 当状态变更的时候，重新构造一颗新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树的差异。注意：diff算法是通过同层的树节点进行比较而非对 树进行逐层搜索遍历的方式，是一种相当高效的算法。

如何让css只在当前组件中起作用？

将当前组件的

MVVM模型

• 是一种架构模式，Model-View-ViewModel
• 把传统的 MVC 模式中的 Controller演变成 ViewModel.
• Model层代表数据模型
• View代表UI组件
• ViewModel是View和Model 沟通的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据。

单向数据流和双向数据流

• 单向数据流方式 使用一个上传数据流和一个下传数据流进行单向数据通信，两个数据流之间相互独立。只能从一个方向来修改状态。vuex(组件data->action->state-组件data)
• 双向数据流(也叫双向绑定)。在双向数据流中，Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态，用户的操作(如在输入框中输入内容) 也可以修改状态。
• 这使改变一个状态有可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的，使得代码变得很难调试。

MVC的理解

• model(模型)-视图(view)-控制器(controller) 的缩写，一种软件设计典范
• 目的是将M和V的代码分离，从而使同一个程序可以使用不同的表现形式。分别对应 Html、css、js

vue3.x响应式数据原理

• 改用 Proxy 替代 Object.defineProperty。proxy可以直接监听对象和数组的变化，并且有很多种拦截方法。作为新标准将受到浏览器厂商重点持续的性能优化。
• proxy只会代理对象的第一层，那么vue3是怎样处理这个问题的呢?
• 判断当前Reflect.get的返回值是否为Object.如果是 则再通过 reactive方法做代理，实现深度观测。

监测数组的时候可能会触发多次get/set,如何防止触发多次呢

• 判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger.

vue2.x中如何监测数组变化的?

• 使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写(push,pop,shift,unshift,splice,),指向了自己定义的数组原型方法。当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。

computed和watch

• computed 本质是一个具备缓存的 watch,依赖的属性发生变化就会更新视图。适用场景 计算比较消耗性能的计算场景。当表达式过于复杂时，可以将复杂的逻辑放入计算属性中处理。
• watch 没有缓存，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep:true 选项，这样便会对 对象中的每一项进行监听。此时，会带来性能问题，优化可以使用 字符串形式监听。

虚拟Dom以及key属性的作用

• 在浏览器中操作DOM是很耗费性能的，频繁的操作DOM,会造成很大的性能负担。虚拟DOM 可以解决这个问题
• vue2的Virtual DOM借鉴了开源库 snabbdom的实现。
• 本质是用一个原生的js对象去描述一个dom节点。是对真实DOM的一层抽象。
• 映射到真实DOM要经历 VNode的 create、diff、patch 等阶段
• key的作用是尽可能的复用 DOM元素
• 新 旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
• 需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可以复用的节点。key也就是 children中节点的唯一标识。

vue中组件生命周期调用顺序

• 组件的调用顺序都是 先父后子 渲染完成的顺序是 先子后父。
• 组件的销毁操作是先父后子 销毁完成的顺序是 先子后父。

组件设计应遵循的原则

就近管理

• 单文件开发
• 依赖的静态资源放在统计目录
• 相关联组件也放在同级目录

高复用性

• 页面级别的复用(基础组件)
• 项目级别的复用-私有组件库(业务组件)
• 公司级别的复用-开源组件库(element-ui)

分层设计

• 分为四层：展示层、业务层、持久层、数据库层

灵活扩展

• 考虑扩展性，除了提供丰富的props还要提供 slot 插槽来完成用户的定制化需求。或提供可利用 render函数动态渲染的功能。

在vue中实现防止模板渲染时闪烁的方法

[v-cloak]{display:none}

{{}}

###### 对template编译的理解？ - 通过compile编译器把template先转化成AST(抽象语法树)树，createCompile的返回值是compile，是用来创建编译器的。在得到 render函数返回 VNode。 - compile还负责合并 option - AST经过 generate得到 render函数，render的返回值是 VNode,也就是虚拟DOM节点，有标签名、子节点、文本等等。 ###### vue.extend和vue.component - 后者会注册一个全局的组件，其会自动判断第二个传进来的是 Vue继承对象还是普通对象 - 前者返回的是一个扩展实例构造器。主要服务于 后者的。

vue的计算属性

• 当模板中放入太多的逻辑，难以维护，且多次使用的情况下，尽量采取计算属性的方式。
• 使数据处理结构更清晰
• 依赖于数据，数据更新，处理结果自动更新
• 计算属性内部this指向vm实例；
• 在template调用时，直接写计算属性名即可；
• 常用的是getter方法，获取数据，也可以使用set方法改变数据；
• 相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。