vue的知识点汇总

﹏ヽ暗。殇╰゛Y 2021-07-25 22:03 713阅读 0赞

# 什么是vue #

Vue是一套基于MVVM模式构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计未可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页面应用提供驱动，支持前后端分离。

Vue是一位叫尤雨溪的人开发的，2015年10月26日发布了1.0.0版本，2016年10月1日发布了2.0.0版本。  
Vue开发效率高，帮助减少不必要的dom操作，双向数据绑定，当数据发生变化时，视图自动更新，开发者只需要关注业务逻辑，不用关心dom如何渲染，数据驱动代替dom操作。

# 创建Vue实例 #

创建vue实例很简单，先引入vue，创建html标签`<div id="app"></div>`,在script标签内部`new Vue({})`,通过el属性绑定要渲染的view,也可以使用$mount()方法手动挂载Vue实例，代码如下：

<div id="app"></div>
    <script src="https://img-blog.csdnimg.cn/20210121094440626.png"></script>
    <script>
    	new Vue({ 
    		el:"#app"
    	})
    	或者
    	new Vue({ }).$mount('#app')
    </script>

# data为什么要用函数初始化数据而不是对象 #

data写成一个函数，数据以函数返回值的形式定义，这样每次服用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己的私有空间，它们只负责维护各自的数据，不会造成混乱。而写成对象形式，所有的组件实例共用了一个data，这样改一个全都改了，可以理解为函数相当于局部作用域，对象相当于全局作用域。

# 生命周期 #

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例过载到DOM病在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

#### beforeCreate:初始化之前 ####

#### created:初始化完成（不能获取dom,一般用于获取ajax数据） ####

#### beforeMount:挂载之前 ####

#### mounted:挂载完成之后（可以获取dom） ####

#### beforeUpdate:数据更新之前 ####

#### updated:数据更新之后，应用场景：可以做数据更新后获取焦点，也可以获取dom的动态属性，更改数据时对dom进行操作 ####

#### beforeDestroy:在vue实例销毁之前调用，在一步，实例仍然完全可用（页面离开） ####

#### destroyed:在Vue实例销毁后调用。调用后Vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁（页面离开） ####

#### activated:keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用，用于性能优化缓存dom和数据 ####

#### deactivated:keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用 ####

# 模板语法 #

vue使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数配合Diff算法能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。结合响应系统，实现数据更新即时渲染到View层。

# 模板语法-指令 #

指令Directives是带有v-前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。

#### v-clock ####

v-clock指令设置样式，这些样式会在vue实例编译结束时，从绑定的HTML元素上被移除，当网络较慢时，网页还在加载vue.js，而导致vue来不及渲染，这时页面就会显示出vue源代码。直到vue.js文件加载完毕，模板编译后才会被替换为数据对象中的内容。在这个过程中，页面会出现闪烁状况，用户体验相当不好，这时用v-clock就可以解决。

#### v-text ####

v-text指令用于更新元素的文本内容

#### v-html ####

v-html指令用于在元素中插入html片段，相当于innerHTML，该指令存在安全漏洞，因此在本地代码中可以使用，如果要调用第三方的代码中包含该指令，则存在安全隐患。一般用于新闻详情和商品详情页面的内容输出。

#### v-once ####

v-once指令可以让元素或组件只渲染一次，使用了此指令的元素/组件及其所有的子节点都会当作静态内容并跳过，这可以用于优化更新性能。

#### v-pre ####

v-pre指令用于跳过这个元素和它子元素的编译过程。可以用来显示元素的mustache标签，对于大量没有指令的节点会加快编译速度。

#### v-bind ####

v-bind指令可以动态的绑定一个或多个HTML元素的属性，或一个组件prop表达式。v-bind也支持缩写用：冒号表示，v-bind也支持动态属性名格式：`:[attrhref]`

# 条件渲染v-if的使用 #

v-if指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true的时候被渲染。配合v-else指令来表示v-if的else块。配合v-else-if，充当v-if的else-if块。可以连续使用。  
v-if加key值的作用：vue在渲染元素时，会尽可能的复用已有的元素而非重新渲染，这么做会使vue渲染效率变得非常高。但是在开发中会出现我们不想要的结果，比如：在输入框中输入一下内容，单击切换按钮，会发现之前输入的内容被保留下来了，用Key就可以解决这个问题。

# 条件渲染v-show的使用 #

v-show可以根据表达式的值true或false来显示或隐藏HTML元素，用法和v-if大致一样，不同的带有v-show的元素始终会被渲染并保留在DOM中。v-show相当于对CSS样式display进行操作。

# 列表渲染v-for与v-if一同使用性能优化技巧 #

当v-for与v-if一起使用时，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。如果渲染一个列表时，需要按照条件来渲染，那么就需要v-for与v-if一起使用了。  
vue官方不建议v-if和v-for同时用在同一个元素上，因为一起使用的话，每个元素都会添加一个v-if，重复运行于每个v-for循环中，会造成性能的浪费。建议使用computed计算属性解决这个问题。

# v-model修饰符 #

#### .lazy ####

在默认情况下，v-model在每次Input事件触发后将输入框的值与数据进行同步（除了输入法组合温和时），还可以添加lazy修饰符，从而转为在change事件之后进行同步

#### .number ####

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符  
这通常很有用，因为即使在type="number"时，输入Input元素的值也总会返回字符串类型。大家应该都知道字符串类型是无法和加号直接做运算的，会把加号当作连接符使用，通常需要把字符串类型的数字用parseInt或parseFloat转化成数字类型。而.number修饰符会自动转成数字类型。

#### .trim ####

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符

# 双向绑定原理 #

双向绑定的原理也叫响应式原理，面试的时候经常会问到，所以需要了解一下，vue是采用对象设计模式知发布者-订阅者模式的方式，通过Object.defineProperty()属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调，来完成双向绑定。  
Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。  
Object.defineProperty()有三个参数，第一个：需要定义属性的当前对象，第二个：当前需要定义的属性名，第三个：属性描述符。

# ref获取DOM #

ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例。

# 注册组件 #

组件分为全局注册组件和局部注册组件，全局组件使用Vue.component()方法，有两个参数，第一个参数自定义组件的名字，第二个参数是一个函数对象，函数对象使用Vue.extend()方法创建的组件构造器，也可以是一个选项对象。

# 组件之间的通讯 #

vue组件之间的通讯有多种方式：1.父组件给子组件传值2.子组件给父组件传值3.兄弟组件之间的传值。组件之间的通讯在实际开发中可增加代码的重用性和扩展性。

#### 父组件给子组件传值 ####

组件是当作自定义元素来使用的，HTML元素有属性，同样，组件也可以有属性，利用属性给子组件内部传值，子组件使用props来接收。  
vue还支持属性类型的验证，比如子组件接收的属性值应该是一个对象类型，结果父组件传的是一个字符串类型的值，这显然不符合要求。  
如果是Array或Object类型默认值需要用工厂函数返回。

由于prop传递数据属于单向数据流，父组件的属性变化会向下传递给子组件，但是反过来却不行，这可以防止子组件意外改变父组件的状态，从而导致应用程序的数据流难以理解。每次父组件更新数据时，子组件的prop都会刷新为最新的值。这意味着我们不应该在组件内部直接更改prop，如果更改vue会在浏览器的控制台中给出警告。

#### 兄弟组件之间传值 ####

在实际开发中会出现兄弟组件（非父子组件）之间传值的需求，实现的方式很简单，声明一个bus变量其值为new Vue()，然后在A组件bus. e m i t ( ) 方 法 传 值 ， B 组 件 用 b u d . emit()方法传值，B组件用bud. emit()方法传值，B组件用bud.on方法接收A组件传过来的值，来完成兄弟组件之间的传值。

# 命名（具名）插槽 #

在向命名插槽提供内容的时候，可以在一个元素上使用v-slot指令，并以v-slot的参数的形式提供其名称，在base-layout组件内部元素有一个特殊的属性name，其值为v-slot的参数名称，没有name属性的元素会带有隐含的名字“default”。缩写语法：用\#代替v-slot