文章目录

• 1.Vue的理解：
• • • 1.1.mvvm模型：
    • 1.2.vue2的数据代理：
    • 1.3.vue2的生命周期：
    • 1.4.vue中的render函数：
    • 1.5. mixin混入：
• 2.Vue组件间通信：
• • • 2.0.props：
    • 2.1.全局事件总线：
    • 2.2.消息订阅与发布：
    • 2.3.Vuex插件通信：
    • 2.4.$nextTick：

1.Vue的理解：

1.1.mvvm模型：

vue的思想参考了mvvm模型，model通过vm操作dom，同时vm又检测dom的变化传递给model。

1.2.vue2的数据代理：

vue2中的数据代理是通过object.defineProperty进行get，setter实现的。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Setters 和 Getters

1：Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）

2：Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
通过object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。（也因为这样，对于数组，对象增删属性的操作，vue2相对费劲）

来源https://blog.csdn.net/qq_55593227/article/details/119717498

1.3.vue2的生命周期：

因此，vue为我们提供了8个钩子函数用于在各个生命周期的处理。

 beforeCreate(){console.log('beforeCreate')},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log('mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeDestroy() {console.log('beforeDestroy')},destroyed() {console.log('destroyed')},

1.4.vue中的render函数：

1.vue.js 与 vue.runtime.xxx.js的区别：

2.vue.js 是完整版的 Vue，包含：核心功能+模板解析器
vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器

3.因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容。

原文链接

1.5. mixin混入：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

2.Vue组件间通信：

2.0.props：

props 需要使用 props 选项来定义：

在接收时可以对数据进行限制

	props:{name:{type:String,required:true,},age:{type:Number,default:99},sex:{type:String,required:true}}

2.1.全局事件总线：

1.安装全局事件总线

new Vue({render: h => h(App),beforeCreate () {// 安装全局事件总线，$bus就是当前应用的vmVue.prototype.$bus = this}}).$mount('#app')

2.使用全局事件总线

这样就可以在组件中使用this.$bus.$emit发送事件，需要接受数据的组件用this.$bus.$on监听，用this.$bus.$off解绑当前事件。

2.2.消息订阅与发布：

1.安装：

npm i pubsub-js

2.消息订阅与发布：
发布消息

PubSub.pubilsh('xxx', data)

订阅消息（一般在mounted()中进行）

 this.pid = PubSub.subscribe('xxx', this.demo) // 订阅消息
}

取消订阅

PubSub.unsubscribe('xxx')

2.3.Vuex插件通信：

1.vue工作原理：

2：安装vuex：

npm install vuex

出错的话可以换个版本试试

npm install vuex@3.6.2 --save

安装不了的可以手动指定版本

创建/src/store/index.js(当然也可以直接写)

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {
}
//准备mutations对象——修改state中的数据
const mutations = {increment (state) {state.count++}
}
//准备state对象——保存具体的数据
const state = {count: 0
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

main.js

new Vue({render: h => h(App),router: router,store}).$mount('#app')

3.使用：

获取vuex数据状态：

vuex中count的值{{this.$store.state.count}}

 count加1

 addCount() {this.$store.commit("increment")},

如果逻辑简单可以直接跳过action直接和mutations对话。

2.4.$nextTick：

在下次更新（重新挂载后）执行内部的语句

  addB() {this.b++console.log("执行了addB")this.$nextTick(() => {console.log("执行了netTick")})