Day6-vue 学习笔记

动态组件

<template>
  <div>
    组件A
  </div>
</template>
​
<template>
  <div>
    组件B
  </div>
</template>

<template>
  <div>
    <component :is="showComp" />
    <button @click="switchComp">切换组件B</button>
  </div>
</template>
​
<script>
import AComp from '../components/AComp'
import BComp from '../components/BComp'
export default {
  components: { // 组件注册
    AComp,
    BComp
  },
  data () {
    return { // showComp 指向 A组件
      showComp: 'AComp'
    }
  },
  methods: {
    switchComp () { // 点击按钮变为 B组件
      this.showComp = 'BComp'
    }
  }
}
</script>

异步组件

局部引入

 new Vue({
    // ...
        components: {
            'my-component': () => import('./my-async-component')
        }
    })

动态组件：是Vue中一个特殊的Html元素：<component>，它拥有一个特殊的 is 属性，属性值可以是 已注册组件的名称 或 一个组件的选项对象，它是用于不同组件之间进行动态切换的。

异步组件：简单来说是一个概念，一个可以让组件异步加载的方式；它一般会用于性能优化，比如减小首屏加载时间、加载资源大小。

mixins

在vue中提供了一种复用性的操作，所混入的对象包含任意组件的选项（data，生命周期，methods，watch，computed）

基本使用

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
​
// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})
​
var component = new Component() // => "hello from mixin!"

1 创建文件夹

mixins/form.js mixins/index.js mixins/user.js

user.js

export default{
    data(){
        return{
            userInfo:[]
        }
    },
    methods:{
        getUserDate(){
            console.log('获取用户信息')
        }
    }
}

form.js

export default{
    data(){
        return{
            formInfo:[]
        }
    },
    methods:{
        getFormDate(){
            console.log('获取表单信息')
        }
    }
}

index.js

将其他混入导入到index。js中，然后统一管理,导出

import FromMixin from '/from'
import UserMixin from '/user'
​
export{
    FromMixin,
    UserMixin
}

2 使用

app.vue

<script>
import { FromMixin,UserMixin} from './mixin/index.js'
export default{
    name:'App',
    mixins:[ FromMixin,UserMixin]
}

选项合并冲突

data | computed：

数据对象在内部会进行递归合并，并在发生冲突时以被混入的组件数据优先

会发生覆盖，mixin组件的data会被覆盖

生命周期 | watch

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin的钩子先调用，组件自身钩子后调用

methods

将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

会发生覆盖，mixin组件的methods会被覆盖,使用原组件中的方法。

虚拟结点

虚拟节点是Vue中的一种概念，它是对真实DOM节点的抽象表示。虚拟节点是一个JavaScript对象，用于描述DOM节点的结构、属性和内容等信息。通过使用虚拟节点，Vue可以在内存中构建整个DOM树的副本，称为虚拟DOM树（Virtual DOM Tree）。虚拟DOM树可以与真实DOM树进行比较，并根据差异来实现高效的DOM更新，从而提高性能。

渲染函数

渲染函数是Vue中用于生成虚拟节点的函数。它是一种以编程方式描述组件渲染结果的函数。渲染函数接收一个上下文对象作为参数，并返回一个虚拟节点。通过编写渲染函数，开发者可以更加灵活地控制组件的渲染过程，可以动态生成虚拟节点，处理条件渲染、循环渲染等复杂逻辑。

使用渲染函数的主要有以下几种方式：

1. 使用`createElement`函数：`createElement`函数是Vue提供的一个辅助函数，用于创建虚拟节点。可以通过调用`createElement`函数来创建虚拟节点树，并在渲染函数中返回根节点。
2. 使用JSX语法：Vue支持使用JSX语法编写渲染函数，通过Babel等工具将JSX编译为`createElement`函数的调用。使用JSX可以更直观地描述虚拟节点树的结构。

渲染函数的作用是：创建虚拟dom，然后将dom渲染成真实的页面。

当使用渲染函数时，可以通过一个简单的例子来说明其用法和优势。

假设我们有一个简单的Vue组件，用于显示一个按钮和一个数字。点击按钮时，会弹窗

使用模板语法的方式：

<template>
<div>
	123
    <button @click="Click me">Click me</button>
</div>
</template>

  methods: {
    Click me() {
      alert('hello,world')
    }
  }

使用渲染函数的方式：

<script>
Vue.component('test',{}
  render:function(h) {
    const vnode = h('div', 
    {}
    [
     h('button', {
        on: {
          click: function(){
          	alert('hello,world')
          }
        }
      }, 
      'Click me'),
    ])
  return vnode
};
</script>
通过调用函数，我们可以指定节点的标签名、属性、事件和子节点等信息。
使用渲染函数的好处是，我们可以根据动态数据和逻辑来生成DOM结构。

习题

什么是动态组件？

在 Vue 中根据需要动态地渲染不同的组件

什么是异步组件？

是指按需加载的组件，而不是在初始渲染时立即加载

mixin与组件的区别？

1 组件是独立的实体，可以单独存在，具有自己的模板、状态和生命周期。而 Mixin 不能单独存在，必须与组件结合使用。

2 mixin会有命名冲突，而组件是独立的，不会受到其他组件的影响。

keep-alive的作用？

在组件切换时，缓存包裹的组件，保持包裹组件的状态，避免重复渲染。

vue框架引入路由的步骤？

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter,路由整合
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router

4. 实现跳转

   <router-link to="/about">About</router-link>

5. 预留路由出口

   <router-view></router-view>

router中push和replace跳转的区别？

push是往历史堆栈中追加路由记录，replace是替换历史堆栈中的当前路由

什么是路由懒加载？

在访问路由的时候才加载对应的组件。