Vue.js核心概念精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/105965969

文章目录

生命周期：

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子 = 生命周期函数 = 生命周期事件

八个钩子函数：

创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性
created：实例已经在内存中创建好，此时data和methods已经创建ok，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数，此时的data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕后调用的函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用
destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
在这里插入图片描述

在这里插入图片描述

V-指令

V-model
原理：
V-model就是vue的双向绑定指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性的时候，更新页面上输入控件的值。
v-model是动态的数据双向绑定（只能用在input，textarea，select上）

v-bind
eg：v-bind：class 可简写为：class
当加上v-bind：后，它的值class不是字符串，而是vue实例对应的data.class的这个变量，也就是说data.class是什么值，他就会给class属性传递什么值，当data.class发生变化的时候，class属性也会发生变化，适合用在css来实现动画效果的场合，他只是单向变动

v-bind支持的类型：
html中的属性、css的样式、对象、数组、number 类型、bool类型

// 绑定文本
<p v-bind="message"></p>
// 绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>
// 绑定表达式
:class{className:true}

v-show和v-if
v-if是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建
如果在初始渲染时条件为假，那么v-if什么都不做，知道条件第一次为真的时候才会开始渲染条件块，相比之下，v-show就简单的多，不管初始条件是什么，元素总会被渲染。
实践结果：
如果用v-if的话，整个dom结构压根就不会出现在页面上，如果用v-show的话，要视后面的条件来决定，如果是true则显示，如果为false，则加上style=’‘display:none’’ 所以如果是组件之类的用v-if更好一些，如果是一些暂时性隐藏一会要显示的还是用v-show更方便
对于v-style和v-show来比较，v-show相当于是v-style=”display:none”v-style=”display:block”的快捷方式。

v-for
当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用

v-on
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown…
注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click

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

v-html
v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

MVVM模式

Model代表数据模型，负责数据存储
View代表UI组件，负责页面展示
ViewModel：负责业务逻辑处理简单理解就是一个同步View和Model的对象，连接Model和View
在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

MVC模式

Model View Control（控制器：M-V关联）
MVC有厚重的View Controller，无处安放的网络逻辑，较差的可测试性

组件参数传递

父组件传给子组件：子组件通过props方法接受数据
子组件传给父组件：$emit方法传递参数

Vuex

State：存放数据状态，不可直接修改里面的数据
Mutations：定义的方法动态修改Vuex的store中的状态或数据
Getters：类似vue的计算属性，主要用来过滤一些数据。
Action：可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
Modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vue.js的两个核心

数据驱动、组件系统
数据驱动：数据驱动是vue.js最大的特点。在vue.js中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。
组件系统：vue中的组件分为两种，全局组件和局部组件。

route & router

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等