vue组件、组件生命周期、组件分离模块化

一、组件（一个包含vue特定选项的javascript对象）（一切皆组件）

data选项（函数方法） - 定义数据,返回的属性将会成为响应式的状态

data为什么定义成函数?

函数有自己独立的作用域，当进行组件复用时，一个组件改变值不会引起另一个组件值改变,如果定义成对象，复用组件值会跟着变化

methods选项 - 定义方法,是一些用来更改状态与触发更新的函数

template选项 - 定义模板

components选项 - 注册组件

directives选项 - 指令注册

props选项 - 接收外部传入的数据（可定义数组、也可定义对象）

emits选项 - 接收事件

computed计算属性

watch侦听属性

生命周期钩子选项

expose选项 - 暴露可被外部访问的私有方法

provide（函数）/inject选项 - 依赖注入

mixins选项 - 混入

name选项 - 定义组件名称，缓存组件时使用

inheritAttrs - 阻止属性透传

传入createApp的对象实际上就是一个组件（根组件）

组件定义、注册、使用

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const { createApp } = Vue
        //子组件
        const ComA = {
            data() {
                return {
                    count: 0
                }
            },

            methods: {
                add() {
                    this.count++
                }
            },

            /* html */
            template: `<div>
                <button @click="add">+{{count}}</button>
                </div>`
        }
        //创建根组件
        const root = {
            //局部注册组件
            components: {
                ComA
            },

            // data为什么定义成函数， 函数有独立的作用域，当进行组件复用时，一个组件改变值不会引起另一个组件值改变,如果定义成对象，复用组件值会跟着变化
            data() {
                return {
                    title: '根组件'
                }
            },
            methods: {
                get() {}
            },
            /* html */
            template: `<div>
                <h1>{{title}}</h1>
                <ComA></ComA>
                <com-a></com-a>
                <button @click="get">确定</button>
                </div>`
        }

        const app = createApp(root)
        // app.component('ComA', ComA) // （组件名，组件对象）先全局注册组件，再挂载mount
        app.mount('#app')
    </script>
</body>
</html>

二、组件生命周期（创建->挂载->更新->卸载(销毁)）

vue3：

setup(组合式API) ->beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeUnmount->unmounted

created生命周期数据初始化完成

mounted生命周期中可以操作dom节点元素

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="../lib/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const { createApp } = Vue
        const ButtonCounter = {
            data() {
                return {
                    count: 0,
                    list: []
                }
            },

            setup(props) {
                console.log('setup >>>');
            },

            // 创建生命周期
            beforeCreate() {
                console.log('beforeCreate >>>')
            },
            created() {
                console.log('created >>>', document.querySelector('#btn1'))//null
            },

            //挂载生命周期
            beforeMount() {
                console.log('beforeMount >>>')
            },
            mounted() {
                console.log('mounted >>>', document.querySelector('#btn1'))
            },

            // 更新生命周期
            beforeUpdate() {
                console.log('beforeUpdate >>>')
            },
            updated() {
                console.log('updated >>>')
            },

            // 卸载生命周期
            beforeUnmount() {
                console.log('beforeUnmount >>>')
            },
            unmounted() {
                console.log('unmounted >>>')
            },

            /*html*/
            template: `<button id="btn1" @click="count++">加一 {{count}}</button>`

        }

        const RootApp = {
            components: {
                ButtonCounter
            },

            data() {
                return {
                    title: '生命周期',
                    state: true
                }
            },

            methods: {
                closeButtonCouter() {
                    this.state = false
                }
            },

            /*html*/
            template: `<div>
                        <h2>{{title}}</h2>
                        <button-counter v-if="state"></button-counter>
                        <button @click="closeButtonCouter">关闭</button>
                    </div>`
        }

        createApp(RootApp).mount('#app')
    </script>
</body>
</html>

vue2：

beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed

三、组件分离模块化

es6模块化规范 - 客户端 (浏览器已经支持 chrome)

script标签中要加type="module" <script type="module"> </script>

暴露 export say 导入import {say,num} from 'a.js' 调用say()

暴露export default say 导入 import sayEat from 'a.js' 调用sayEat()

export暴露，引入时名字不能改，并且要加{}

export default暴露，引入时名字可以改，不用加{}

一般暴露多个用export，暴露一个用export default

commonjs模块化规范 - 服务端

暴露module.exports = {} 导入const AModuel = require('a.js')

module.exports暴露，require导入

index.html

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 </title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</html>

main.js

javascript 复制代码

 // 使用vue3 ES模块构建版本
 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
 
 // 导入根组件
 import App from './App.js'
 createApp(App).mount('#app')

App.js

css 复制代码

import ComA from "./ComA.js";
export default {
  components: {
    ComA,
  },

  data() {
    return {
      title: "模块化",
    };
  },

  methods: {
  },

  /*html*/
  template: `<div style="width:400px;height:400px;background-color:skyblue;">
                <h2>{{title}}</h2>
                <com-a></com-a>
            </div>`,
};

ComA.js

javascript 复制代码

export default {
    data() {
      return {
        count: 0,
      };
    },

    created() {
    },

    methods: {
    },

    /*html*/
    template: `<div style="width:200px;height:300px;background-color:pink;">
                      <p>{{ count }}</p>
                </div>`,
  };