vue

定义

以数据驱动视图的渐进式（轻量级）mvvm框架
响应式原理：Object.defineProperty

指令

html，text，show，if，for，model，slot，once，bind，on

修饰符

事件修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .native 绑定原生事件

指令

• v-model.[number,lazy,trim]
• v-bind:name.sync

键盘

• .enter or .13

生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforedestroy
destroyed

监听和计算

watch
对数据的监听，受数据类型的影响，当监听数组或对象时需要开启deep深度监听，可以执行异步
comouted
监听一个数据并返回一个新的数据，不受数据类型的影响，并且自带缓存，会做新旧值比较，当两者相同时则不触发，不能执行异步代码，因为他需要立即返回数据

内置组件

component，keep-alice，slot

组件通信

父传子

v-bind+props,v-model

子传父

v-on+$emit,.sync+‘$emit(‘update:prop’)`

兄弟

让父组件充当中转站。

跨级

vuex，$root,

自定义指令和过滤器

directive

控制dom行为的，比如页面打开后自动让input获取焦点

过滤器filter

在不修改原数据的情况下，返回一个处理后的值。比如购物车里给money加前缀等。

vue组件的组成部分和api

样式，dom，js；

api

data,methods,生命周期，watch，computed，components，name，props，filters，directive

• data 为什么是函数
  冲突问题，内存开销

插件

插件的安装Vue.use(plugin)

开发插件：一个带有install方法的对象，在install函数中使用注入的Vue实例来封装自己的插件

vuex

定义

全局状态管理器

组成部分

• strict 严格模式，默认非严格模式
  非严格模式下，state可以被任意修改，mutations可以执行异步
• state 状态数据
  数据双向相应
• getters 对state计算出来的新值
• mutations 用于修改state的同步函数
  使用commit调用mutation
• actions 执行异步且只能调用mutations来修改state
  使用dispath调用action
• module 模块化store
  干什么的？切割vuex，让每个独立使用store的页面拥有自己的store
  什么时候用？比如电商项目，每个页面除了使用全局的用户信息外，还有额外的自己独立页面使用的状态。尤其是当小组成员开发的时候，避免冲突，使用模块化。
• plugins 插件
  让vuex拥有没有的功能，比如vuex数据是存在内存中的，刷新页面会丢，使用vue-persust插件将数据存入本地，当刷新页面的时候优先从本地读取。

vuex执行|工作流程

state到组件，组件通过dispath调用actions进行通信，actions通过commit调用mutations修改state，state是双向数据响应的，会自动让组件更新。

辅助函数

所有api前面加map

vue-router

路由定义

根据不同的地址呈现不同的内容或页面

路由三大组成部分

router-link导航 ，router-view视图，router配置

路由的跳转方式

声明式导航（标签导航），编程式导航（js跳转方式）

路由跳转方法

• push：向历史记录添加一条,
• replace： 用最新的地址替换当前的历史纪录
• go: 通过数字控制前进后退
• back：返回上一个历史记录

路由模式

mode:

• hash：锚点路由
• history：历史路由， h5history对象封装的
• abstract：给nodejs服务端渲染【ssr】用的（了解即可）

路由传参

• query 以？开头的get请求传参方式
• params 【动态路由】是显示传参，非动态路由使用params传参叫隐式传参，隐式的参数存在内存，刷新页面会丢，params传参只能通过命名路由跳转
• meta 元数据，用于传参，更多情况下用于配置路由权限。

路由拦截器|路由生命周期

每一个路由守卫都有一个回调函数，该函数里有三个参数，分别是：
to：及将要进入的路由对象
from: 即将要离开的路由对象
next: 必执行函数，默认参数true，false则阻止路由跳转

全局

beforeEach(){} 前置守卫，路由权限一般写在这里
afterEach(){} 后置守卫，没有next()

组件

beforeRouterUpdate(){} 准备路由更新，使用场景：动态路由
beforeRouterLeave(){} 准备离开路由

路由类型

• 动态路由：一组拥有相同基础路径的路由，加载的是同一个模板。 语法/home/:id
• 嵌套路由：一组拥有相同基础路径的路由，加载的是不同的页面。 语法children:[{path:'hot'},component:Hot]

路由配置的api

• name 路由命名
• path 匹配浏览器地址栏的里的地址
• component 加载组件
• alias 给路由起别名
• redirect 重定项
• meta 元数据，用于路由配置里的传参
• children 嵌套路由的api

路由实例配置

mode ，
routes,
scrollBehavior,

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的vue知识总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。