一、组件（一个包含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>`,
};