vue笔记

1.怎么理解vue框架

        vue是一套构建用户界面的渐进式js框架

        支持引入各个组件库 插件

        diff算法  虚拟dom 性能高

2.el  与  data 的两种写法

        el:'#app',

        v.$mount('#app')

3.事件修饰符

        @click.prevent  .stop  .once capture

        键盘事件  @keyup.enter  delete  esc 等等

4.watch 与 computed 

        watch可以进行异步任务，computed不能，它是基于一个已有的值来进行计算，具有缓存作用，computed 能做的事，watch都可以做

5.vue指令

        v-pre  v-once

        自定义指令

        

                

        ref 与 reactive的区别    
    ref定义基本数据类型，虽然也可以定义对象类型，但还有通过reactive来处理的
    且ref还是通过Object.defineProperty()的get 和 set 来实现响应式，在读取ref的时候
    需要使用 .value来读取
    
    reactive 定义对象类型的数据，它是通过 Proxy来实现响应式，并通过Reflect操作对象内部数据

路由里的全局守卫等等

        activated、deactived 
 是在<keep-alive></keep-alive>中的组件，(也就是一个路由)，也就是被缓存的路由
在激活和没激活的状态下，触发的生命周期钩子函数

全局前置导航钩子
    //在路由切换之前就触发的函数
    router.beforeEach((to,from,next) => {
        if(to.path === '/home/news' || to.path === '/home/message'){
            if(localStorage.getItem('school') === 'atguigu'){
                next()
            }else { alert('无权查看')}
        }else {
            next()
        }
    })

全局后置导航钩子
    //在路由切换之后触发的函数
    router.afterEach((to,from) => {
        document.title = to.meta.title || '购物街'
    })

独享路由守卫  
    //只在某个组件内才可以使用的,只有一个，没有全局式的分前置和后置，写在router的路由
    配置里
    
    {
        name:'news',
        path:'news',
        component:News,
        meta:{isTrue : true}
        beforeEnter( (to,from,enxt) => {
        
        })
    }

//组件内路由守卫 是写在组件内部的
    beforeRouterEnter(to,from,next){}
    beforeRouterLeave(to,from,next){}

在路由配置里，如果要加入自己需要的配置 就要写在 meta 里
    {
        path:'/home',
        component:Home,
        meta:{ isAuto : false}
    }

toRaw 和 markRaw
    toRaw: 作用是将一个由 reactive 生成的响应式对象 转为 普通对象，将不再由proxy做代理
    使用场景: 用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的刷新

    markRaw : 作用是 标记一个属性对象，设置为不可变，也就是非响应式

provide 与 inject
    传递值的两个方法  
    在父组件中，provide('car',car)
    在子组件中 ， inject(car)  即可得到这个值

响应式原理

Vue2.x

        数据代理

        通过vm对象来data对象里的属性操作

        原理  通过Object.definedProperty()把data里的所有属性方法都交给vm（vue的实例对象）

每一个属性都有get/set方法

Vue3.x

        使用Proxy来代理对象，再用Reflect来反射对象，对被代理对象进行操作

vue生命周期