vue2学习心得

MVVM

    M Model 数据
    V View  视图
    VM ViewModel 视图模型
     

Object.defineProperty

    let person = {
        name:'小王'，
        sex：'男'
    } 
    
    Object.defineProperty(person,'age',{
        value:19,
        enumerable:true, // 控制属性是否可枚举
        writable：true,   // 是否可修改
        configuable：true,  // 是否可删除
        get:function(){},
        set:function:{}
    })

数据代理 obj2没有x属性，访问obj2.x返回obj.x，并能修改obj.x

数据劫持，数据代理，计算属性全利用这个原理

    let obj1 = {
        x:100，
    } 
    let obj2 = {
        y:200，
    } 
    使用Object.defineProperty的get、set方法
    Object.defineProperty(obj2,'x',{
        get:function(){return obj1.x},
        set:function(value){obj1.x = value}
    })

vue数据代理

    vue定义的data，被vm._data数据代理，并复制给vm对象下面，
    模板中可以使用vm下的所有属性，
    vm._data.a = vm.a 

计算属性&监听属性

vue数组响应式问题

数组直接替换可以 vm.$set和vue.set不能修改vm和vm._data的数据

自定义指令

全局事件总线

    main.js中
    let  D = Vue.extend({})
    let d = new D()
    Vue.prototype.$bus = d
    或者
    new Vue({
        el:"#app"，
        render：h=>h(App),
        beforeCreate(){
            Vue.prototype.$bus = this 
        }
    })
    
    发事件
    this.$bus.$emit("shijian1",(data)=>{
        console.log(data)
    })
    接收事件
    this.$bus.$on("shijian1",{a:1})
    
    销毁钩子中销毁事件
    this.$bus.off() 

消息订阅与发布

    import pubSub from  'pubsub-js'
    
    发事件
    pubSub.piblish("hello","你好")
    
    接收事件
    this.pId = pubSub.subscribe("hello",(_,data)=>{
        console.log(data)
    })
    
    销毁钩子中销毁事件
    pubSub.unsubscribe(this.pId) 

vue代理

    vue.config.js中
    devServer:{
        proxy:'http://localhost:8080'
    }
    //
     devServer:{
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                oathWrite:{'^/api':''}
            }
        }
    }

vuex

    components
    this.$store.dispatch("jia",2)
    this.$store.commit("JIA",2)

    action 
    jia(context,value){
        context.commit("JIA",value)
    }

    mutation
    JIA(state,value){
        state+=value
    }
    

getters

mapstate

vue-router

    main.js
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    
    Vue.use(VueRouter)
    

    router.js
    import VueRouter from 'vue-router'
    import A from '/A'
   
   export default new VueRouter({
       routes:[
           {
               path:'/a',
               component: A
           }
       ]
   })
    

路由守卫

全局守卫

    router.beforeEach((to,from,next)=>{})
    
    router.afterEach((to,from)=>{})

学习视频地址： www.bilibili.com/video/BV1Zy…