vue知识梳理

vue知识梳理

作为三大框架之一，vue相比于其他框架，有着简单、易用、灵活等特点

生命周期

• init：初始化时最先进入的生命周期函数，可在此函数中进行一些操作
• beforeCreated：页面创建前进入的周期函数
• created：页面创建后进入的周期函数，一般在此调取接口获取后端数据等等操作
• beforeMount：节点挂载前进入的周期函数
• mounted：节点挂载后进入的生命周期函数
• beforeUpdate updated：页面数据发生改变时进入的周期函数
• beforeDestroy destoryed：销毁时进入的周期函数
• activated：进入keep-alive组件触发的生命周期函数
• deactivated：退出keep-alive组件触发的生命周期函数

页面第一次加载进入哪几个生命周期函数?

• init 
• beforeCreated
• created
• beforeMount
• mounted

常见指令

• v-if  相当于js中的if判断，可用于对样式的判断 缺点消耗内存  尽量不可跟v-for同行使用 会报错
• v-show 与v-if类似  他们两个的不同之处就在于v-show是样式上的控制显隐 v-if是对dom进行删除增加操作
• v-bind 绑定数据  可简写：
• v-on 绑定事件 可简写@
• v-for 相当于js中的for循环 写法为  v-for='(item,index) in data'  :key='index' 使用for之后需绑定key值 目的是为了高效的渲染虚拟dom
• v-model vue中强大的双向数据流绑定技术 通过数据劫持等原理实现

模板语法 以及结构

计算属性以及监听器

• computed：计算属性 当数据发生改变时会自动进行工作 常用与购物车模块等计算工作
• watch：侦听属性  Vue 提供的一种更通用的方式来观察和响应 Vue 实例上的数据变动  相比较于计算属性，计算属性更为强大，但是有时还是需要watch来动态监听一些事物，比如router

组件的使用

封装公共组件，通过export导出，哪个页面需要这个公共组件就使用import进行导入即可，vue中组件首字母需大写且引入之后需要注册

组件传值

• 父传子：父组件使用bind绑定数据写法为 :message=message，子组件中使用props接受，与data同级别，可定义接受值的类型与默认值
• 子传父：父组件绑定事件，子组件使用this.$emit()来触发事件，第一个值为父组件中绑定的函数名，第二个值为传递的参数
• 非父子传值：可使用$on或者vuex来进行，简单来说就是怎么简单怎么来

常见修饰符

• .self：当元素自身被触发时才进行的行为操作，不会冒泡或者捕获
• .prevent：阻止默认行为 比如a链接的跳转
• .stop：阻止冒泡
• .once：只会触发一次

插槽

• 匿名插槽：顾名思义，就是没有名字的插槽
• 具名插槽：顾名思义 就是有名字的插槽  加上name属性
• 作用域插槽：父组件引用子组件中的数据 父组件中使用slot-scope来接收传递的数据

---

vue-router

最简单的路由模块 如下图所示：

常见的路由模式：

1. hash：携带#号 
2. history：正常的路由 需要后端配合

注册路由：

1. 引入对应的vue文件
2. 在routes中注册 语法如下

路由拦截器：

router.beforeEach(to,from,next)=>{}，三个参数顾名思义，to代表去哪个路由，比如to.path=='/login'，可在此判断中是否为登录状态，from代表来自哪里，无论如何，记得next放行

路由写法：

1. {path:'',name:'',component:''}
2. {path:'',name:'',component:'',children:{}}  嵌套写法

keep-alive

在vue中，如果你想某些页面不让他重新渲染，你可以使用keep-alive缓存

用法：

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>


include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

v-model

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

v-model上面的修饰符

• .lazy
• .trim
• .number