VUE 开发——Vue学习（二）

一、watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作

简单写法

 <div id="app"><textarea v-model="words"></textarea></div><script>const app = new Vue({el:'#app',data: {words: ''},watch: {//该方法会在数据变化时调用执行//newvalue 新值 oldvalue 老值（一般不用）words (newValue, oldValue){console.log("变化了",newValue,oldValue)}}})</script>

完整写法

添加额外配置项

1.deep：true 对复杂类型深度监视

2.immediate：true 初始化立刻执行一次handler方法

data: {obj: {'words':'','lang':'italy'},result:'',},watch: {obj: {deep:true,handler (newValue) {console.log("修改了")}}}

二、Vue生命周期

生命周期四个阶段：创建、挂载、更新、销毁

生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子

1.创建阶段（响应式数据）————beforeCreate、created

2.挂载（渲染模板）————beforeMount、mounted

3.更新阶段（修改数据，更新视图） ————beforeUpdate、updated

4.销毁阶段（销毁实例）————beforeDestory、destroyed

三、工程化开发

四、普通组件的注册使用

组件注册的两种方式：

1.局部注册：只能在注册的组件内使用

1.创建.vue文件

2.在使用的组件内导入并注册

2.全局注册：所有组件内都能使用

1.创建.vue文件

2.main.js中进行全局注册

使用：作为html标签使用 <组件名></组件名>

局部注册

app.vue

<template><div class="App"><!-- 头部组件 --><Header></Header><!-- 主体组件 --><!-- 底部组件 --></div>
</template><script setup>
import Header from './components/Header.vue';
export default {components: {//‘组件名’：组件对象Header:Header}
}
</script><style scoped>
.app {background-color: aqua;
}
</style>

组件使用

<template><div class="header">header</div>
</template><script setup>
</script><style scoped>
.header {font-size: 30px;background-color: rosybrown;height: 200px;
}
</style>