目录
Vue的核心技术
MVVM思想
-
M->model 模型
- 通过VM绑定视图
-
V->view 视图
- 通过VM监听模型
-
VM-> vue实例对象（模型和视图通过它进行数据的绑定和渲染）
Vue可以访问哪些属性，Vue属性命名规范
-
vue本身属性，data数据
-
命名规范
-
不能以$或者_开头
- $->vue的公开访问属性
- _->vue的（私有）属性一般不访问
-
Vue的数据绑定机制
- 通过代理模式实现，Object.defineProperty()方法给Vue实例对象增加属性；
- 访问时，底层通过get方法访问被代理对象的属性
- 赋值时，底层通过set方法给被代理对象的属性赋值
简单实现Vue的数据绑定机制
const vm = new Vue({
data:{
name: '张三',
age: 17
}
})-
实例化
-
编写Vue类（ES6新特性）
class Vue{
constructor(options){
// 通过Object.keys获取某个对象{}的全部属性名
const propertyNames= Object.keys(options.data);
propertyNames.foreach(propertyName=>{
// 给vue 添加属性
// 遍历options中的属性
// 1. this->表示Vue
// 2. propertyName ->需要代理的属性
// 3. {}-> get set 当通过vue获取/修改值时，触发的函数
// 注意->读值时，需要用data[key] 类[属性名]
Object.defineProperty(this,propertyName,{
get(){
return options.data[propertyName];
},
set(val){
options.data[propertyName] = val;
}
})
})
}
}
-# Vuex插件的使用
-
网址
Vuex
-
用于多个组件之间共享的数据store
-
相当于vm和所有vc共享该属性store
-
安装
-
npm i vuex@3 vue2安装 -
npm i vuex@4 vue3安装
-
核心配置项
- actions
- 用于处理业务逻辑的action
- mutations
- 用于更新state的mutation
- state
- 存储共享属性
- getters
- 相当于计算属性一样使用
- module
入门案例(vue2)
目标：实现一个按钮，点击一次数字加1
1. 安装vuex
2. 创建vuex目录和store.js
3. 编写store.js
// 引入vue插件。使用vuex插件时，需要vue
import Vue from 'vue'
// 引入vuex插件
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建三个对象 actions mutations state
// 处理业务逻辑，一个个回调函数
const actions = {
// context vuex的上下文,相当于一个压缩版的store
// value 组件传递过来的参数
plusOne(context,value){
// 业务逻辑
// ....
// 也可以通过context进行分发
// context.dispatch('otherAction',value);
// 继续下一个环节，action已经完成了自己的工作，下一个工作由其他（人）来做
// 通过context提交数据，由其他人进行更新
// 提交到mutations中的某个mutation,加上value
value = value+1
context.commit('PULS_ONE',value)
}
}
const mutations = {
// state 需要更新的数据，
//value 值
PULS_ONE(state,value){
state.num += value
}
}
// 数据对象，做了响应式处理
const state = {
num:0
}
// 创建store对象
const store = new Vuex.Store({
// 负责执行某个行为的对象
actions:actions,
// 负责更新的对象
mutations:mutations,
// 状态对象
state:state
})
// 暴露Store对象
export default store;
// 简写形式
// export default new Vuex.Store({actions,mutations,state})
