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>

五、组件的三大组成部分

结构template 、样式style 、逻辑script

组件样式冲突scoped

默认情况下：写在组件中的样式会全局生效 --> 因此很容易造成多个组件之间的样式冲突问题

1.全局样式：默认组件中的样式会作用到全局

2.局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

六、组件通信

组件与组件之间的数据传递

组件关系分类：父子关系、非父子关系

父子关系：props和$emit

父子通信：

1.父组件通过props将数据传递给子组件

2.子组件利用$emit通知父组件修改更新

非父子关系：provide&inject 、eventbus

七、ref和$refs

作用：用于获取dom元素或组件实例

特点：查找范围 -> 当前组件内