vue3学习1

vite是新的官方构建工具，构建速度比webpack更快

vue项目的入口文件是index.html，一般在这里引入src/main.js，并且设置好容器#app

App.vue放的是根组件，components里放分支组件

vue组件中写三种标签，template & script & style

配置数据方式，放到data(){}中：

函数放到methods:{}中

以上配置项是vue2的写法，选项式API

vue3是组合式API，使用setup(){ 定义 + return }，setup执行时间早于beforeCreate()，setup中没有this的定义，setup可以返回一个渲染函数

import setupExtend from 'vite-plugin-vue-setup-extend' 可以通过name属性指定组件名

setup语法糖，自动return：

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

vue3响应式数据-ref包裹的数据是响应式数据（对象），reactive包裹对象类型的数据

Object.assign(obj1, obj2) 可以更新reactive定义的对象

toRefs可以把reactive定义的每一组key：value变成ref类型的变量

toRef从reactive中一个一个取，其中更改nl，reactive中的age也会变

计算属性computed(()=>{return})，计算依赖的数据变化，就会重新计算，computed是ref变量

以下是只读的写法

可读可写，get set方法：

vue3-watch（监听）：

可以监听四种数据：

        1、ref定义的数据；

        2、reactive定义的数据；

        3、函数返回一个值（getter函数）；

        4、一个包含上述内容的数组。

vue2的watch写法：

vue3的watch写法，是一个函数，声明 监听对象和 回调函数（newValue, oldValue）

终止监听：

监听ref定义的对象类型的数据，监听的是对象的地址值，若想监听对象内部属性的变化，需要手动开启深度监听deep=true；想要立即监听，也要手动开启immediate=true ；

oldValue和newValue 也是监听的新老地址的值，若没变地址，则oldValue=newValue，大部分情况（监听对象地址不变）可以把newValue和oldValue合并成一个参数value。

reactive对象类型数据无法整体修改，必须通过Object.assign来修改

监听reactive对象类型数据，默认是开启深度监听的，隐式创建深层监听且无法关闭！

地址不变，则oldValue和newValue相同

监听对象中的某个值（基本类型的），需要构造getter函数，监听getter函数返回值

监听对象中的某个 子对象，可直接监听，也可以构造getter函数，

***建议写函数式，并加上deep=true（监听中最常用）

同时监听以上几种情况：

watchEffect，运行时立即执行一次，不用指明监听的对象:

使用ref绑定标签，使用时也要用.value调用：

使用ref绑定自定义的vue组件标签时，父组件无法通过ref直接获取子组件的变量（有保护措施），需要在子组件中通过defineExpose导出的变量才能在父组件中识别

v-bind:value= 单向绑定（简写为:value=）， v-modal:value= 双向绑定（简写为v-modal=）

v-for写法，v-bind:key=缩写成 :key=

局部样式，只在当前vue文件生效：