vue（二）vue组件

组件基础

单文件组件

在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。

Vue单文件组件（.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板html、逻辑js和样式css封装在单个文件中

<template>...html content...</template>
<script>
    ...js content...
    export default{
        name:"mytemp"
    }
</script>
<style>...css content...</style>

• <template> 可以包含任何合法的 HTML，以及一些 Vue 特定的语法。

• <script> 包含组件中所有的非显示逻辑，最重要的是，<script> 标签需要默认导出一个 JS 对象。该对象是你在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含 template 模板的对象会被处理和转换成为一个有 render() 函数的 Vue 组件。

• <style>组件中定义CSS样式 ，如果你添加了 scoped 属性（如 <style scoped>），表示此样式只在当前组件中生效，组件样式全局通用就不用scoped

加载组件

• 引入组件：在script 中import xxx from 'xxx'

• 挂载组件：在script 中的export default components:{xxx}，导入的组件暴露给模板，在 components 选项上注册它。这个组件将会以其注册时的名字作为模板中的标签名

• 显示组件：在template中 <xxx/>

如下加载一个myTemp.vue组件

<template>
    <my-temp/> // 显示组件 <myTemp>也可以，不过更建议前一种写法
</template>
<script>
    import myTemp from './components/myTemp.vue'    // 导入组件
    export default{
        components:{
            myTemp    // 挂载组件
        }
    }
</script>
<style>...css content...</style>

注册

全局注册

使用 Vue 应用实例的 app.component() 方法，让组件在当前 Vue 应用中全局可用。

import MyComponent from './App.vue'
​
app.component('MyComponent', MyComponent)

局部注册

全局注册虽然很方便，但有以下几个问题：

1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

局部注册的组件在后代组件中并不可用

组件生命周期

每个组件在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。8个生命周期函数：

• 创建时：beforeCreate、created

• 渲染时：beforeMount、mounted（网络请求一般放在mounted中）

• 更新时：beforeUpdate、updated

• 卸载时：beforeUnmount（卸载之前，把消耗性能的处理都删掉）、unmounted