Vue基础

4、Vue
(1)VUEX的原理(https://blog.csdn.net/Dora_5537/article/details/91354067)
①vuex整体思想诞生于flux,可其的实现方式完完全全的使用了vue自身的响应式设计，依赖监听、依赖收集都属于vue对对象Property set get方法的代理劫持。vuex工作原理，vuex中的store本质就是没有template的隐藏着的vue组件
(2)组件传参
①父传子

父：<son :msg="msg"></son>
子：props: ['msg']   

②子传父

子：this.$emit('fun', 参数)
父：<son @fun="fun"></son>

(3)实现路由跳转的方法
①This.$router.push(‘path’)
②Home
(4)keep-alive怎么用
keep-alive 是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中，通常配合vue-router共同使用
在路由表中配置
meta:{
keepAlive: true/false
}

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
// 路由表 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存    }
  }
]

(5)watch和computed区别
①watch可以监听组件内的属性值，如果发生改变即触发的一个函数。computed是计算属性，随着所依赖的变量的改变而重新计算，返回一个新值。
(6)导航钩子
参数(to,from,next)
①全局：router.beforeEach()
②路由：beforeEnter()
③组件：beforeRouteEnter()
beforeRouteLeave()
​ beforeRouteUpdate()
(7)双向数据绑定原理
①vue2中使用的是数据劫持的方式对数据进行绑定，Object.defineProperty，利用getter和setter对数据进行监听和设置

(8)如何实现路由懒加载
1、vue异步组件实现懒加载

方法如下：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)
 
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: resolve=>(require(["@/components/HelloWorld"],resolve))
  }
 ]
})

2、ES 提出的import方法，（------最常用------）

方法如下：const HelloWorld = （）=>import(‘需要加载的模块地址’)

不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld
  }
 ]
})

总结：路由和组件的常用两种懒加载方式：
1、vue异步组件实现路由懒加载
　　component：resolve=>([‘需要加载的路由的地址’，resolve])
2、es提出的import(推荐使用这种方式)
　　const HelloWorld = （）=>import(‘需要加载的模块地址’)