vue笔记7 （待续...）

vue笔记7

16.动态组件

页面中的某个地方，在不同的组件之间进行动态切换，除了使用条件渲染（v-if/v-show）还能使用动态组件来实现。

vue提供了component标签来实现；

在component标签的is属性的属性名决定在当前位置使用哪个组件来进行渲染。

<component is="Box"></component> ==><Box></Box>

可以给is属性绑定data中的变量，通过改变该变量的值，来达到切换不同组件的目的：

<component :is="mycomponent"></component>

<template>
  <div id="app">
    <button @click="fn">xx</button>
     <components :is="com"></components>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'
export default {
  name: 'app',
  data(){return{
	  flag:true,
	  com:"HelloWorld",
  
  }},
  components: {
    HelloWorld,"HelloWorld2"
  },
  methods:{
	  fn(){
		 this.flag=!this.flag
		 this.com=this.flag?"HelloWorld":"HelloWorld2"
	  }
  }
}
</script>

17.缓存组件

动态组件的每次切换，都会创建一个新的组件对象。

在上一个组件进行的操作数据等，在切换后不会保存。

使用keep-alive可以缓存动态切换的组件。

<keep-alive><component :is="Box"></component></keep-alive>

keep-alive的两个属性：

• include决定哪些组件可以被缓存
• exclude：除当前组件外，其他组件被缓存
• 可以传入字符串或者正则表达式（传入正则表达式时，需要给属性加v-bind表示是JS语法环境）

<keep-alive exclude="a,b">
 <!-- 除了name为a或者b的组件，其余组件都缓存 -->
 <component :is="view"></component>
</keep-alive>
 
<!-- 使用正则表达式，需使用v-bind 缓存名字为a || b的组件-->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

动态组件的钩子函数：

deactivated：只有被缓存的组件才有，被 keep-alive 缓存的组件停用时调用。

activated：只有被缓存的组件才有，被 keep-alive 缓存的组件激活时调用。

<script>
	export default {
		data() {
			return {
				idcard: "",
				pwd:""
			}
		},
		methods:{
			send(){
				console.log(this.idcard,this.pwd)
			}
		},
		mounted() {
			console.log("只有第一次创建时才会执行")
		},
		activated() {
			console.log("页面刷新渲染一次就执行一次")
		}
	}
</script>

18.异步组件

异步加载并缓存组件：

1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

• 方法一：通过webpack2.0的按需加载

  //1 全局：
   Vue.component('component-name',function(resolve){
   //require 语法告诉 webpack自动将编译后的代码分割成不同的块
   //这些块将通过 Ajax 请求自动下载
     require(['./my-async-componnet'],resolve)
   })
   //注册全局组件名，但只有一个名字，没有实体，相当于空的
  //当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法
  //然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。
  
  //2 局部
   new Vue({
     components: {
          'component-name':function(resolve) {
             require(['./my-component'], resolve)
          }
     }
   })
  
  

• 方法二：通过webpack2+es2015返回一个promise(主流 )

  //1 全局：
  Vue.component('component-name',
   （）=> import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象
   )
  //2 局部：
   new Vue({
     components: {
         'component-name': () =>  import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象。
     }
   })
  
  

• 方法三：高级异步组件

  //工厂对象可以返回一个如下对象，对象里面的一些配置参数
  const AsyncComponent = () => ({
    // 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
    component: import('./MyComponent.vue'),
    // 异步组件加载时使用的组件
    loading: LoadingComponent,
    // 加载失败时使用的组件
    error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时