vue学习笔记——简单入门总结(三)

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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 选项来定义：

<Student name="luotianyi" sex="女" :age="16" />
1

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

	props:{
			name:{
				type:String,
				required:true,
			},
			age:{
				type:Number,
				default:99
			},
			sex:{
				type:String,
				required:true
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.1.全局事件总线：

1.安装全局事件总线

new Vue({

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

}).$mount('#app')
1
2
3
4
5
6
7
8
9

2.使用全局事件总线

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

2.2.消息订阅与发布：

1.安装：

npm i pubsub-js
1

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

PubSub.pubilsh('xxx', data)
1

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

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

取消订阅

PubSub.unsubscribe('xxx')
1

2.3.Vuex插件通信：

1.vue工作原理：

2：安装vuex：

npm install vuex
1

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

npm install vuex@3.6.2 --save
1

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

创建/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
})



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

main.js

new Vue({

  render: h => h(App),
  router: router,
  store

}).$mount('#app')
1
2
3
4
5
6
7

3.使用：

获取vuex数据状态：

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

 <button @click="addCount">count加1</button>
1

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

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

2.4.$nextTick：

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

  addB() {
      this.b++
      console.log("执行了addB")
      this.$nextTick(() => {
        console.log("执行了netTick")
      })
1
2
3
4
5
6