12.vue学习笔记(异步组件+依赖注入+Vue应用)

文章目录

• • • • 1.异步组件
      • 2.依赖注入
      • • 注意事项
      • 3.Vue应用
      • • 3.1.应用实例
        • 3.2.根组件
        • 3.3.挂载应用
        • 3.4.公共资源文件夹

1.异步组件

目的：优化组件性能
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件
defineAsyncComponent方法来实现此功能
打开项目会更快

<template>
  <keep-alive>
    <component :is="tabComponent"></component>
  </keep-alive>
  <button @click="changeHandle">切换组件</button>
</template>
<script>
import ComponentA from './components/ComponentA.vue';
//同步加载
//import ComponentB from './components/ComponentB.vue';
//异步加载组件
import { defineAsyncComponent } from 'vue';
const ComponentB = defineAsyncComponent(
  () => import('./components/ComponentB.vue')
)

export default{
  data(){
    return{
      tabComponent: "ComponentA"
    }
  }, 
  components:{
    ComponentA,
    ComponentB
  },
  methods:{
    changeHandle(){

      this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB":"ComponentA"
    }
  }
}

</script>

2.依赖注入

通常情况下，从父组件向子组件传递数据时，会使用props。
现有一结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层子组件需要
一个较远的先组件中的部分数据。在这种情况下，如果仅使用props则必须将其沿着组件链
逐级传递非常麻烦

这一问题被称为 prop逐级透传 
解决：
	provide 和 inject 可以解决这一问题
	一个父组件相当于其所有后代的组件，会作为依赖提供者。任何后代的组件树，
	无论层级有多深，都可以注入由父组件提供给整条链路的依赖 

也可以从data中读取数据

<template>
  <h3>Grandpa</h3>
  <Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default{
  data(){
    return{
      message:"祖级数据data"
    }
  },
  // provide:{
  //   message:"祖级数据"
  // },
  provide(){
    return{
      message: this.message
    }
  },
  components:{
    Parent
  }
}
</script>
——————————————————————————————————————————————————————————————————————
<template>
    <h3>Child</h3>
    <p>{{ message }}</p>
    <p>{{ fullMessage }}</p>
</template>
<script>
export default{
    inject:["message"],
    data(){
        return{
            fullMessage: this.message
        }
    }
}
</script>

注意事项

provide 和 inject只能由上到下传递

除了在一个组件中提供依赖，还可以在整个应用层面里提供依赖

<template>
    <h3>Child</h3>
    <p>{{ message }}</p>
    <p>{{ fullMessage }}</p>
    <p>{{ golabData }}</p>
</template>
<script>
export default{
    inject:["message","golabData"],
    data(){
        return{
            fullMessage: this.message
        }
    }
}
</script>
——————————————————————————————————————————————————————————————————————
<template>
  <h3>Grandpa</h3>
  <Parent />
</template>
<script>
import Parent from './components/Parent.vue';
export default{
  data(){
    return{
      message:"祖级数据data"
    }
  },
  // provide:{
  //   message:"祖级数据"
  // },
  provide(){
    return{
      message: this.message
    }
  },
  components:{
    Parent
  }
}
</script>
——————————————————————————————————————————————————————————————————————
<template>
    <h3>Parent</h3>
    <p>{{ golabData }}</p>
    <Child />
</template>
<script>
import Child from './Child.vue';
export default{
    inject:["golabData"],
  components:{
    Child
  }
}

</script>
——————————————————————————————————————————————————————————————————————
<template>
    <h3>Child</h3>
    <p>{{ message }}</p>
    <p>{{ fullMessage }}</p>
    <p>{{ golabData }}</p>
</template>
<script>
export default{
    inject:["message","golabData"],
    data(){
        return{
            fullMessage: this.message
        }
    }
}
</script>

3.Vue应用

3.1.应用实例

每个vue应用都是通过createApp函数创建一个新的应用实例

import { createApp } from 'vue'

const app = createApp({
	/* 根组件选项 */
})
//app：vue的实例对象
//在一个Vue项目中，有且只有一个Vue的实例对象

3.2.根组件

传入的createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，
其他组件将作为其子组件

import { createApp } from 'vue'
import App from './App.vue'

//App：就是根组件
const app = createApp(App)

3.3.挂载应用

应用实例必选在调用.mount()方法后才会渲染出来。
该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串

app.mount('#app')
//挂载的内容都将在index.html中呈现
<div id="app"></div>

浏览器可执行文件：
	1.HTML
	2.CSS
	3.JavaScript
	4.Image
构建工具：
	Webpake（做一些打包，发布的操作）
	vite
	
最终被编译成main.js文件，在html中引入
<script type="module" src="/src/main.js"></script>

入口main.js

3.4.公共资源文件夹

在src目录下的assets文件夹的作用就是存放公共资源
例如：
	图片，公共CSS或者字体图标等