Vue复习和总结(低难度)

Vue复习和总结(低难度)

v-show 和 v-if 区别

v-show 只是在样式上做了修改，v-show=‘false’ 时dom节点上会添加“ display:none ”， 以此使dom节点不显示

v-if 是直接操作dom，v-if=‘false’ 时让dom节点消失，在dom树上不会存在这个节点，以此实现节点不显示的效果

v-show 和 v-if 在使用时要注意：

1.属性值频繁变动（经常要让节点消失又出现的那种）要使用 v-show，值改变样式相对 v-if 的节点操作性能消耗要小，速度快。

2.不会频繁变动的就建议使用 v-if，不需要渲染的节点在开始就不渲染，提高节点添加的效率。

方法调用、watch、computed渲染数据的区别

在显示数据的地方（ {{ sum() }} ， {{ sum }} ）

方法调用时，每次数据更新，sum() 函数都会执行一次，大量的使用 sum() 来显示数据，性能太差。除非不希望缓存，有特定用途。

watch可以通过监听所有与 sum 有关联的变量，在有变动的时候更新 sum。这个一般情况下是不如computed好用的，因为大概率代码量会大很多，需要监听的变量可能会很多。除非有异步操作，在computed里面是无法执行异步操作的，watch 则不然。

computed是直接给一个计算属性sum，当任何 sum 所依赖的变量出现变化，他就会重新计算一次。而且 computed 是有缓存的，多个地方调用了 sum计算属性，在出现变化的时候只需要计算一次，此后所有调用这个计算属性的地方就会用之前计算的结果来处理。

Vue 的生命周期

beforeCreate 创建前 --> el 没有获取， vue对象还没有创建

created 创建后 --> el 没有获取， vue对象已经创建

beforeMount 挂载前 --> el 已经获取， vue对象已经创建，但是获取的 el 还没有替换数据（<div>{{ sum }}</div>）。

mounted 挂载后 --> el 已经获取， vue对象已经创建，el 的数据已经替换（<div> 123 </div>）。

beforeUpdate 数据更新前

updated 数据更新后

beforeDestroy 销毁前， 这里可以做一些回收一些计时器、监听之类的东西的操作。

destroyed 销毁后

keep-alive组件有什么用

keep-alive 标签是要和路由组件一起作用的。

路由组件是可以切换的组件，在切换时会把被切换的组件销毁掉。( <component :is="componentName"></component> )

在路由组件外面包上<keep-alive></keep-alive>,可以让组件在被切换的时候不被销毁，转而缓存在内存中。

受 keep-alive 标签影响的组件会多出两个生命周期 --> activated 和 deactivated

keep-alive 标签有三个特有属性 ： include、exclude、max

include = ‘conponentName’ 表示只有这个conponentNmae这个组件会被缓存，还可以用正则表达式多个组件

exclude = ‘componentName’ 表示只有componentName这个组件不会被缓存，同样也可以用正则表达式表示多个组件

max = n 表示最多可以缓存 n 个组件

组件中的data为什么不用对象的形式

组件复用时所有实例都会共享data，如果使用对象的形式，所有实例就会共用一个data对象，这不是外面所希望的。使用函数的形式返回一个新的对象，每个实例就可以独自使用一个对象作为data。

new Vue() 时不需要用函数的形式时因为一个网页只会有一个 vue 实例，没必要。

什么时Vue Loader，为什么脚手架中的

Vue Loader时webpack中的一个Loader，用于转换 .vue 文件为html、css、js用的

定义组件有三种形式，全局组件、局部组件、文件组件

文件组件就是 .vue的组件形式，一个文件一个组件

但是 .vue 浏览器并不能解析，webpack 可以通过Vue Loader把 .vue 文件解析成浏览器可执行文件

当<style>标签里有 scoped 属性时，这个style标签里的样式不会渗透到子组件里面

如果有需求有些样式要渗透、有些样式不要渗透的，可以写两个style标签，一个添加scoped属性，另一个不添加

什么是组件化，组件化有什么好处，组件的创建方式，组件之间如何通信

**什么是组件化：**任何页面我们都可以抽象化为由一堆组件组成的组件树。

大到一个页面、小到一个按钮都可以写成组件。一个页面是由很多组件组成的。这就是组件化。

**组件化的好处：**复用性强，方便分工开发、代码好管理、耦合性低

vue如何创建组件：

全局组件: Vue.component('componentName',{})

局部组件：components:{}

单文件组件：.vue

组件间的通讯方式：

1. props，自定义事件$emit
2. $parent,$children
3. vuex 全局变量
4. let Event = new Vue(), Event.$on('接口'，function(){}), $emit('接口',数据) (这有点像webSocket)
5. 插槽 --> 代码父传子，数据子传父
6. $attr: 在一个子组件com1里面有个子组件<com2 v-bind="$attrs" v-on="$listeners"></com2>，这时在com1组件的父组件传来的属性如果没有被com1的props包含，则com3里面可以通过 this.$attrs.xxx 来获取到。同理所有com1父亲传来的方法如果com1没有调用，则com3里面可以通过 this.$emit('xxx',123) 来触发。（相当于只要没有用过就渗透到子组件里）（这个方法在创建高级别组件时非常有用，平常不怎么使用）
7. provide inject: 祖先组件中用 provide:{} 定义的数据可以直接用 inject（用法和props差不多）注入到组件内使用（这个方法主要在开发高阶组件/组件库时使用）（不推荐平常使用）
8. v-model （语法糖差不多）在子组件中通过 props 获取数据，$emit(‘input’,数据)来修改v-model的数据。（<com v-model="msg"></com> ==> <com :msg="msg" @input="function(msg){this.msg = msg}"></com>）

介绍一下Vue，你觉得Vue有什么特点，有什么好处，和其他你使用的框架有什么区别

特点：

1. 入门相对简单

2. 国人开发，文档易懂

3. 灵活，可以当第三方库使用，也可以用来做项目架构

4. 虚拟Dom，提高性能（重排、重绘的消耗减少）

5. 使用方便，指令、模板、双向绑定 和React相比，数据双向绑定可以直接修改，React需要setState

6. 组件化：vue更容易被新手接受，React都是用js实现的，相对难一些

Vue代理如何配置

新建 vue.config.js 文件

module.exports = {

​	devServer: {

​		proxy : '<url>',

​		changeOrigin : true

​	}

}

or

module.exports = {

​	devServer: {

​		proxy : {

​			'/api':{

​				target:'<url>',

​				changeOrigin : true

​			},

​			'/foo':{

​				target:'<url>',

​				changeOrigin : true

​			},

​		}

​	}

}

使用： /api/接口

localhost/api/接口代理了 <url>/接口， 这样不会跨域（以代理的形式解决了跨域问题，纯前端解决）

Vue模板渲染原理

<p>{{xxx}}</p> 变成 <p>你好</p>

是通过正则表达式匹配 {{xxx}} 形式的代码段，在data、methods、computed里面找到相应的变量、方法、计算属性替换掉{{xxx}}来实现的。

路由的原理是什么、如何实现

什么是路由： 就是通过点击不同的按钮展示不同的页面或组件的功能

原理：根据不同的路径地址，展示不同的页面、组件

实现：

​

hash

​ #a

​ #b

​ history

​ /c

​ /d

如何监听这两者变化

hash

​ window.addEventListener(‘hashchange’,function(){})

history

​ window.addEventListener(‘popstate’,function(){})

什么是MVC,MVP,MVVM

MVC：

Model 代表数据模型，主要是操作数据

View 代表UI视图，主要是将数据模型转化为UI视图展现出来

Controller 控制器，主要负责业务逻辑

View 将用户的操作传输到 Controller

Controller 完成业务逻辑后要求 Model 改变状态

Model 将新的数据发送给 View，用户得到反馈

---

MVP:

1. 各部分之间的通信都是双向的
2. View 和 Model 不发生联系，都是通过 Presenter 传递
3. View 非常薄，不部署如何业务逻辑，称为被动视图，没有如何的主动性，而 Presenter 非常厚，所有逻辑都部署在那里。

---

MVVM:

Model 代表数据模型，主要是操作数据

View 代表UI视图，主要是将数据模型转化为UI视图展现出来

ViewModel 同步 View 和 Model 的对象，双向绑定。

在 MVVM 架构下，Model 和 View 之间没有直接的联系，都是通过 VM 进行双向交互，无论那里的数据变动都会反应到两边

ViewModel 把 View 和 Model 层连接了起来，View 和 Model 之间的同步工作都是由 VM 自动完成的，开发者只需要关注业务逻辑，不需要关注DOM操作和数据同步的问题。