Vue应用组件

Vue应用组件
watch和computed区别
生命周期&&钩子函数

watch

不会监听data中的对象的属性变化

对象格式监听

watch: {
	family: {
		handler(newVal，oldVal){
			console.log(newVal, oldVal);
		},
		// 当页面打开，自动触发一次
		immdiate: true,
		// 是否深度监听对象的属性值，
		deep: true
	}
}

watch和computed区别

computed 监听不到异步变化，
watch 就可以
watch 监听的是data的属性变化， computed 监听的是 data没有属性

动效

通过transition组件，在自定义元素的进场(Enter)，退场(Leave)，以及过程过渡的样式，
- v-enter-from 元素在进场之前的样式
- v-enter-active 元素在进场过程中的样式
- v-enter-to 元素在进场结束时的样式
- 元素退场
- v-leave-from 元素在退场之前的样式
- v-leave-active 愿随在退场过程中的样式
- v-leave-to 元素在退场结束时的样式
自定义类名
因为在一个项目中，可能有多个需要过渡的元素，还互相不关联，这个时候，如果都用默认的类名，会发生样式的覆盖，因此要进行类名自定义

只要给transiton组件添加一个属性 name=”自定义的前缀”

条件与动态切换
和基本使用是一样的，
注意: 如果多个元素进行动态切换，标签名还一样，就要给每个标签添加一个属性 key 为了让Vue知道这是两个元素，才能发生过渡效果

如果不写key vue在对比的时候看到标签名一样以为是一个元素不会发生元素的更新因此只对比得到不一样的东西(内容)进行更新样式是加在元素身上才有过渡效果，所以这种情况必须添加key属性

应用组件

vue.component(组件名称, 配置对象) 定义组件

全局注册 Vue.component("sub-cpent",{})

// 使用组件
<div id="app">
    <sub-cpent></sub-cpent>
</div>

// 全局注册
Vue.component("sub-cpent",{
    data: function(){
        return {
            count: 0
        }
    }
    // 任何 template 里面必须有root标签
    template : '<h1>{{"count"}}</h1>'
    // computed、watch、methods 以及钩子函数等方法，
})

// 一定要挂载前，注册组件
let app = new Vue({
    el: "#app",
    
})

注意在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用

局部注册（谁用注册谁）

var CpentA = {...}
var CpentB = {...}
var CpentC = {...}


new Vue({
    el: "#app",
    // 局部注册
    components: {
    	'cpent-a': CpentA,
    	'cpent-b': CpentB,
    }
    
})

注意局部注册的组件在其子组件中不可用。例如，如果你希望 CpentA 在 CpentB 中可用，则你需要这样写：

var CpentA = {...}

var CpentB = {
	components: {
		'cpent-a': CpentA,
	}

}

生命周期&&钩子函数

创建阶段
- beforeCreate()
created()

区别：这个beforeCreate函数，访问不了data，methods,props，created函数，则可以访问了，因为data，methods，props，已经创建好了,这个created函数，常用于发起Ajax请求，
挂载阶段
- beforemount()
  - 这个阶段，只是编译了模板，在内存中
- mounted
  - 这个阶段，把模板挂载到浏览器中的，页面渲染成功，
  - 常常用于，操作dom，也是使用插件的位置
更新阶段

beforeUpdate
- updated
监听的是页面上数据的变化

销毁阶段
- beforeDestroy()
- destroyed()

总结：1.created函数阶段，发起ajax请求，获取data

2.mounted函数阶段，dom已经在浏览器渲染，可以操作dom，使用插件

应用API

directive

用法： 注册或检索全局指令

example

import {createApp} from 'vue'
const app = createApp({})

// 注册指令
app.directive('my-directive', {
    // 指令是具有一组生命周期的钩子
    // 在绑定元素的attribute 或事件监听器被应用之前调用
    created() {},
    // 绑定元素的父组件创建之前调用
    beforeCreate() {},
    // 在绑定元素的父组件挂载之前调用
    beforeMount() {},
    // 绑定元素的父组件被挂载时调用
    mounted() {},
    // 在包含组件的 VNode 更新之前调用
    beforeUpdate() {},
    // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
    updated() {},
    // 在绑定元素的父组件卸载之前调用
    beforeUnmount() {},
    // 卸载绑定元素的父组件时调用
    unmounted() {}

})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')