/**
* 深度冻结数据
*
* @param {*} obj
*/
function deepFreeze(obj) {
Object.freeze(obj)
for (const i in obj) {
if (obj.hasOwnProperty(i)) {
if (typeof obj[i] === 'object') {
deepFreeze(obj[i])
}
}
}
}
const obj ={
age:20,
hobby:{
one:"篮球"
}
}
deepFreeze(obj)
vue 父子组件通信
1 props/emit
//子组件: Child.vue
this.$emit('to-parent')
// 父组件 parent.vue
<Child ref="child" @to-parent="handleToParent" />
2 $ref
//子组件: Child.vue
<script>
setMsg(){
}
<script>
// 父组件 parent.vue
<Child ref="child" @to-parent="handleToParent" />
<script>
this.$refs.child.setMsg('msg')
<script>
3 $parent
//子组件: Child.vue
<script>
this.$refs.parent.focus()
<script>
// 父组件 parent.vue
<Child ref="child" />
<script>
focus(){
}
<script>
4 $children
//子组件: Child.vue
<script>
setMsg(){
}
<script>
// 父组件 parent.vue
<Child ref="child" />
<script>
this.$children[0].setMsg()
<script>
vue 组件间通信
1 provide/inject
//组件A: ComA.vue
<ComB />
<script>
provide(){
return{
title:'msg',
comA:this //当前组件实例 ,提供给子组件B和所有A的子孙组件注入}
}
methods:{
setMsg(){
}
}
<script>
// 子组件 ComB.vue
<ComC ref="child" />
<script>
inject:['title','comA']
<script>
// 孙子组件 ComC.vue
<script>
inject:['title','comA']
methods:{
handle(){
this.comA.setMsg('hahah')
this.comA.addChild(this) // 调用A z中的方法
}
}
<script>
1 a t t r s / attrs/ attrs/listenters
//组件: ComA.vue
// 将组件A 的所有prop 传给组件B
<ComB v-bind="$attrs" title="aa" >
//组件B:
inheritAttrs:false // 根元素禁用继承
{{$attrs.title}}
//组件: ComA.vue
<ComB @a="handleA" @b="handleB" >
//组件: ComB.vue
console.log(this.$listenters) //{a:f,b:f}
EventBUS
bus.$emit('init')
bus.$on('init', () => {})
bus.$off('init')
Vuex
new Vuex.Store({
state: {
age:10,
name:"张三"
}
getters: {
getAge(state){
return state.age+'666'
}
},
mutations:{
setAge(state,val){
state.age=val
}
}
})
// state 相当于vue中的data
// getter 相当于vue中的computed ,会缓存
this.$store.state.age
const states = mapState(["age",username])
computed:{
...mapState(["age",username])
...mapState({
age: state => state.age,
}),
...mapGetters(['getAge']),
}
命名空间
modules:{
user:{
namespaced: true,
state:{
age
},
mutations:{
setAge(state,val){
state.age=val
}
}
}
}
// 空间取值
this.$store.getters['user/age'];
...mapState('user', [
'age'
)
mutations: 用于 改变state中的值 且为同步操作
actions 是异步操作,可以调用接口信息
// 提交 mutations
this.$store.commit('user/setAge', val)
methods: {
...mapMutations([
'setAge', // 将 `this.setAge()` 映射为 `this.$store.commit('setAge')`
]),
...mapMutations("user", [
"setAge",
]),
...mapMutations({
add: 'setAge' // 将 `this.add()` 映射为 `this.$store.commit('setAge')`
})
handleSubmit (e) {
this.add() // 提交 mutations
}
}
actions 中 定义异步操作( 耗时操作,LocalStorage,网络请求)
actions 中提交的都是 mutations 中定义的方法
actions: {
async Login ({ commit }, userInfo) {
try {
......
const { tokenInfo } = resp.data
// commit 提交修改的是 mutations
commit('setToken', tokenInfo.token)
} catch (e) {
throw e
}
},
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
},
mutations: {
setToken: (state, token) => {
state.token = token
},
someMutation: (state) => {
}
},
action 中的辅助函数
import { mapActions } from 'vuex'
methods: {
...mapActions(['Login']),
async handleSubmit (e) {
await this.Login(this.form)
}
}