vue常用知识总结

Posted 2021-07-18 老张在线敲代码

vue常用知识总结

vue简介

vue 响应式原理：Object.defineProperty。

vue 的作者：尤雨溪 java 出身。

vue 是什么：以数据驱动视图的单页面（spa）渐进式 MVVM 框架。 特性：数据双向绑定

模块化开发：为了不让所有的代码放在同一文件内看着不舒服（降低开发时间，提高开发效率）,每个部分都是一个独立的文件,哪里使用就引入到哪里，目的是好控制，减少代码复用

vue常用指令

-v-text 渲染文本，等价插值写法 插值：{{内容}}

v-html 既可以渲染文本还可以渲染字符串类型的dom片段

v-for 循环渲染 使用它必须加:key="index"，key的存在是为了给底层的diff算法做优化

v-if 条件渲染 根据返回值是true或者false来控制元素的加载与销毁，由于可以销毁元素，故可以触发生命周期

v-show 条件渲染 控制元素的css中的display样式，让元素显示隐藏，不触发生命周期

v-model 数据双向绑定指令，常用于表单元素上，核心指令，另外他还是父子双向通信的一种方式

v-bind 给元素绑定属性的指令，缩写是：也是父组件向子组件传递参数的一种方式

v-on 给元素绑定事件的指令，缩写是@可以绑定原生事件，也可以绑定

vue 的常用 api 组成部分

data：存数据的, 里面的数据被响应式监听 methods：写函数方法的,用于事件的回调函数

components：挂载,注册子组件

name：当前组件的名称,名字必须和文件名一样 （递归组件时必须要有 name）

wach：监听器,默认对监听的简单数据做响应，如果是较为复杂的数组或者对象则需要开启深度监听

computed：计算属性,对一个数据进行监听,并且返回一个新的数据,默认是只读的,如果需要修改则需要传入一个 set 函数

filter：过滤器,。在不修改源数据的情况下得到处理后的值,并且可以用管道符（|）使用多个过滤器

directive：自定义指令,用于指令扩展,举例给 input 添加自动获取焦点

通信方式

父传子：父组件使用v-bind给子组件添加一个自定义属性，自定义属性接收一个数据，子组件使用props接收该数据

子传父：父组件v-on绑定自定义函数，子组件$emit调用函数

父子双向通信：v-model父向子传入value值和input方法

生命周期

八个函数中最常用的一个钩子函数：mounted发起ajax请求

创建阶段

beforeCreate创建前	第一次加载页面时执行（一次性）
created创建后

挂载阶段

beforeMount挂载前 第一次加载页面时执行（一次性）
mounted挂载
当组件被展示在html里面的时候 就执行 用于自动发起请求等操作

更新阶段

beforeUpdate更新前
无论是自己还是父组件  当data或者props的数据被修改时触发
该阶段函数中 不可以修改data数据
updated更新后

卸载阶段

当父组件使用v-if控制当前组件不显示时 意味着该组件被销毁了
beforeDestroy卸载前
用于清理销毁全局变量或者常驻内容的垃圾数据 比如定时器
destroyed卸载后

插槽

slot，允许再子组件内插入dom片段，将子组件作为模板去使用

内置组件

<slot>插槽</slot>
<component is='动态组件'>
<keep-alive>缓存组件</keep-alive>
<template>存放dom的容器</template>

脚手架

设置打包后的基础路径：publicPath 代理跨域：proxy 自定义函数和组件 自定义函数用于组件通信，使用v-on绑定自定义函数
自定义组件就是后缀为.vue的文件 （文件首字母要大写）

过滤器

全局filter 组件filters 在不修改源数据的情况下对数据进行处理，并返回一个新的内容 语法：{{data | filte}}

自定义指令

全局directive 组件directives 页面打开后给input绑定一个自动获取焦点事件函数

插件的开发

开发插件：一个对象必须用install属性接收一个函数，该函数接收一个vue构造器，然后使用该构造器去开发插件
使用插件：Vue.use(plugin);

修饰符

指令修饰符：v-model：.number将值转为数字,.lazy失去焦点后才同步数据,.trim把内容里的所有空格全部清除

事件修饰符：.once让事件只执行一次 .stop阻止冒泡事件 .prevent阻止默认事件 .native绑定原生事件

native场景：在自定义组件上绑定click绑定不上的时候加这个修饰符，还要ui库里的组件

键盘修饰符：.13回车/.enter回车 .ctrl 属性修饰符：.sync让子组件直接使用$emit修改父组件传过去的值

鼠标修饰符：.right监听鼠标右键 .left监听鼠标左键

计算属性和监听器

computed
1.对数据或者属性进行监听操作，但是不能修改，对操作后的数据进行返回，并得到一个新值
2.不受数据类型的影响，只要被监听的数据发生了改变，计算属性就会触发

watch
1.只是对数据或属性进行监听，没有返回值
2.受数据类型影响，当监听的是数组或者对象的时候需要开启深度监听

vue-router路由

配置方式

mode：history和hash history是h5封装的的新api，在ie9以下不兼容 hash兼容所有的

routes

嵌套路由：基于同一个根地址，所有的子路由 children里，每个子路由都有自己对应的页面/自定义组件
** 动态路由**：同一个匹配可以匹配到多个地址，基于同一个根地址，所有匹配成功的地址使用的页面是同一个

重定向：redirect：地址
name：命名路由，给路由取一个名字
别名：alias 给当前的路由取一个或者是多个名称 单个：alias：“lala” 多个alias:[“lala”,"/",""djai]
元信息:meta用于做路由权限的标记

跳转方式

声明式：标签router-link 编程式：this.$router:{push,replace,go,back}
router和route的区别：router是路由的实例对象 route是当前的路由信息

传参方式

query：在地址栏用类似于get的请求方式+去传参，没有限制
params：隐式和显式，显式就是动态路由，隐式就是使用params传递一个任意的数据，并且该数据在页面刷新后会丢失

路由守卫

全局的前置路由守卫：beforeEach 组件内的路由守卫：离开前beforeRouteLeave和更新beforeRouteUpdate

Vuex全局状态管理器

vuex的问题：数据存在内存里，刷新页面就丢了 解决问题：使用插件把数据存在本地存储里 state
全局状态存放的地方，核心，等价于组件里的data getters 用于计算处理state的，等价于组件里的computed
mutations 专门用于修改state的，并且只能执行同步代码 使用commit调用该函数 actions
专门用于执行异步代码的，比如ajax请求 自身不可以直接修改state，可以调用mutations方法去修改state
使用dispatch调用

数据持久化

vuex里面存放的数据，页面一经刷新会丢失： 解决办法：
存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取