携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

1.什么是MVVM模型

1)定义：
MVVM模型是⼀种设计模式，基于前端开发的架构模式

2)核心：View 和 Model 的双向数据绑定

3)作用：
（1）在vue中的MVVM（实现双向绑定原理）
（2）可以在Model中定义和修改数据以及操作业务逻辑
（3）实现了 Model和View的数据响应式
（4）开发者只需关注业务逻辑，复杂的数据状态维护由 MVVM 来统⼀管理

4)图示：

M：Model（模型）对应data的数据
V：View（视图）⻚⾯
VM：ViewModel（视图模型） Vue实例对象

2.vue⽣命周期函数

通常也叫⽣命周期回调函数、⽣命周期函数、⽣命周期钩⼦
vue初始化时在不同的阶段调⽤的不同函数
⽣命周期函数的 this 指向为vue实例，名字不能更

创建前、创建后（beforeCreate、created）
挂载前、挂载后（beforeMount、mounted）
更新前、更新后（beforeUpdate、updated）
销毁前、销毁后（beforeDestroy、destroyed）

3.Computed 和 Watch 区别

Watch监视属性是命令式且重复的
通过Computed计算属性实现更加简介明了
两者都能实现的，优先选择使⽤computed
watch能实现异步调⽤，computed不能

4.vue的组件通讯⽅式

1)⽗⼦组件传值

⽗向⼦传值 props

props: ["string"]

注意：
(1)props的数据时单向的，只能从⽗组件传到⼦组件
(2)props的数据不可更改，如果要更改需备份到data中做操作

⼦向⽗传值
1.⽗组件通过 props 传给⼦组件事件回调传值
在父组件声明一个回调函数，作为桥梁通过props传递到子组件，子组件再执行这个回调函数，通过这个回调函数桥梁将参数传递回父组件，这个方法执行的话，可以改变父组件里面的参数，重新渲染模板实现子传父
2.⾃定义事件（@绑定）
在父组件里面声明了一个函数，函数的触发通过@服务绑定在一个自定义事件上，这个自定义事件绑定在了子组件上，在组件里面通过this. $emit方法来传递，同时这个this.$ emit这个方法也绑定在子组件里面的方法实现子传父

// ⽗组件
<father @mychild="close" />//自定义事件的名字，不能和后面的自定义方法名字重名，否则在子组件去触发自定义事件会失效的

// ⼦组件
closedemo() {
this.$emit("mychild", this.name);
},

3.⾃定义事件（ref绑定：灵活，延时效果）
首先在子组件通过ref绑定一个变量，同时在父组件通mounted生命周期函数里面去监听这个绑定的变量，同时监听这个事件，同时在子组件里面通过this.$emit去触发父组件里面自定义的事件，通过处理实现子传父

// ⽗组件

<father ref="child" />
mounted() {
this.$refs.child.$on("open", this.opendemo); //this.dianji在methods声明或者⽤箭头函数
},

// ⼦组件
methods: {
opendemo() {
this.$emit("open", this.name);
},
},

//⾃定义事件的解绑
this.$off()//一般放在组件销毁beforeDestory上的

2)全局事件总线

//安装全局事件总线
new Vue({
...
beforeCreate(){
  Vue.prototype.$bus = this
}
...
})

//提供数据的组件
this.$bus.$emit('xx',数据)
methods:{
  demo(i){
  console.log(i)
  }
}
mounted(){
  this.$bus.$on('xx',this.demo)

}

//解绑
this.$bus.$off()

3)状态管理库vuex
(1)定义
Vuex 是采⽤集中式存储管理所有组件的状态，并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化应⽤遇到多个组件共享状态时，使⽤Vuex。

(2)使用
多个组件共享数据或者是跨组件传递数据时

(3)属性

state：vuex的基本数据，⽤来存储变量
action：提交的是 mutation，⽽不是直接变更状态，action 可以包含任意异步操作
mutation：提交更新数据的⽅法，必须是同步的
getters：从基本数据(state)派⽣的数据，相当于state的计算属性
modules：模块化vuex，可以让每⼀个模块拥有⾃⼰的state、mutation、action、getters,使得结构⾮常清晰，⽅便管理

(4)Vuex的流程
1.⻚⾯通过提交事件到action
2.action通过commit把对应参数同步提交到mutation
3.mutation会修改state中对应的值
4.getter：将数据state进⾏处理，相当于组件中的计算属性

5.v-if 和 v-show 的区别

编译区别
v-if是动态的向DOM树内添加或者删除DOM元素
v-show是通过设置DOM元素的display样式属性控制显隐
编译条件
v-if是惰性的，当初始条件为假时，什么也不做，当条件为真时才开始局部编译
v-show是在任何条件下，⽆论⾸次条件是否为真，都被编译，然后被缓存，⽽且DOM元素保留
性能消耗
v-if消耗⼤
v-show只有在初始渲染消耗⼤
使⽤场景
v-if不适合频繁切换
v-show适合频繁切换

6.data 是⼀个函数⽽不是对象

vue中组件是⽤来复⽤的，为了防⽌data复⽤数据变量污染，将其定义为函数
vue组件中的 data 数据都应该是相互隔离，互不影响的，需要通过data函数返回⼀个对象作为组件的状态
将组件中的 data 写成⼀个函数，数据以函数返回值形式定义，每复⽤⼀次组件，就会返回⼀份新的data ，拥有⾃⼰的作⽤域，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据

7.vue路由传参

query传参

//字符串
<router-link :to="`/home?text=${text}`" >⾸⻚</router-link>

//对象
<router-link :to="{ path: '/home', query: { text: text } }">⾸⻚</router-link>

//获取
//this.$route.query.text

params 传参

//路由器声明 params 传参
{
name: 'shouye',
path: 'home/:text', //字符串形式传参时需加占位符告知路由器，此时是参数
component: Home,
},

//字符串
<router-link :to="`/home${text}`">⾸⻚</router-link>

//对象
<router-link :to="{ name: 'shouye', params: { text: text } }">⾸⻚</router-link

//获取
this.$route.params.text

注：
1.字符串形式传参时需加占位符告知路由器，在路径后⾯是参数
2.path对应的是 query属性，name 对应的是 params 属性

编程式路由导航

this.$router.push({
    path: "/home",
    query: {
    text: this.text,
    },
});

「掘金日新计划 · 8 月更文挑战」的第11天—Vue的常用知识点