封装vue2局部组件都要注意什么
一. 关于局部组件组成的三个部分（template, script, style）
-
template => 组件的模板结构 （必选）
- 每个组件对应的模板结构，需要定义到template节点中
- template中使用的指令
{{msg}}
![]()
Now you see me
Now you don't
- template定义根节点
注：vue 2.x版本中，节点内dom结构仅支持单个根节点；但在vue 3.x版本中，支持多个根节点
-
script => 组件的javascript行为 （可选）
- script中的data节点（可以定义当前组件渲染期间需要用到的数据对象；data是一个函数）
- script中的methods节点（可以定义组件中的事件处理函数）
-
style => 组件的样式 （可选）
- style的lang属性支持可选值css，less，sass，scss
- 当使用less或sass时，要先安装less或sass依赖，再设置lang的属性值为less或sass
- scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，弥补sass和css之间的鸿沟
- 合理使用scoped，因为使用scoped可以让样式只对当前组件生效
二. 关于生命周期
- beforeCreate
- created
- beforeMounted
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
created和mounted的区别：created在模板渲染成html前调用，mounted在模板渲染成html后调用
三. 关于父子组件的传值
封装出来的通用组件叫子组件，引用通用组件的界面叫做父组件，组件的封装必须高性能低耦合
1. 父组件向子组件传参用props
- {{value}}
2. 子组件向父组件传参用emit
四. 关于computed与watch
1. computed与watch的区别：
- computed是计算属性，watch是监听，监听data中的数据变化
- computed支持缓存，即当其依赖的属性值发生变化时，计算属性会重新计算，反之则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行
- computed不支持异步，有异步操作时无法监听数据变化；watch支持异步
2. computed与watch的使用场景
- computed的使用
{{ changewords }}
- watch的使用
FullName: {{fullName}}
FirstName:
五. 关于mixin
局部混入中mixin的文件就是一个对象，这个对象可以包含vue组件的一些常见的配置，包括data，methods，生命周期的钩子函数等等。
不同组件中的mixin是相互独立的。
-
mixin的使用
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {},
};六. 关于slot的使用
七. 关于vuex
vuex的五个组成部分：state，mulations，action，getters，modules
- state：定义了应用程序的状态，即要管理的数据
const store = new Vuex.Store({
state: {
count: 0
}
})- getters：用于获取state中的状态，类似vue组件中的计算属性
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})- mulations：修改state的数据
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
add(state, payload) {
state.count += payload
}
}
})- action：用于异步操作和提交mulations，在actions中可以进行任何异步操作，最后再提交到mulations中同步修改state
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
})- modules：用于将store分割成模块，每个模块都拥有自己的state, getters, mulations, action和子模块，以便提高应用程序的可维护性
const store = new Vuex.Store({
modules: {
cart: {
state: {
items: []
},
mutations: {
addItem(state, item) {
state.items.push(item)
}
},
actions: {
addAsyncItem(context, item) {
setTimeout(() => {
context.commit('addItem', item)
}, 1000)
}
}
}
}
})