# vue3-dome

**Repository Path**: Xbaiss/vue3-dome

## Basic Information

- **Project Name**: vue3-dome
- **Description**: 学习vue3的特性
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-02-03
- **Last Updated**: 2022-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-dome

# 介绍
学习vue3的特性。vue3.x bate（测试版本） 发布2020年9月19日，在vue2.x的基础上进行一些优化，对typescript有更好的支持。
vue3.x语法和vue2.x非常相似。

vue3.x git地址：https://github.com/vuejs/vue-next

vue3.x 文档地址：https://v3.vuejs.org

# 安装vue官方脚手架以及创建项目

提供2个脚手架 创建方式，vue-cli 和vite等脚手架，推荐vue-cli

vue-cli 创建项目

vue create study-vue3 (@vue/cli版本是4.5.8就有选择 vue3的默认项目 )


# 视频教程

https://www.bilibili.com/video/BV1ra4y1H7ih?p=48[尚硅谷]
https://www.bilibili.com/video/BV1j5411n7m5?p=6[黑马程序员]
https://www.bilibili.com/video/BV1nz4y1k7eb?p=23[it]


文档：
https://www.cnblogs.com/wjlynew/p/13929818.html[深入 Vue 3 响应性原理]
# vue的基本语法

## 绑定数据，绑定html,绑定属性，循环数据

1.  绑定数据

    {{mgs}}

2.  绑定HTML

    data(){
        return {
            h2:"<h2>html 标签</h2>"
        }
    }

    <div v-html="h2"></div>

3.  绑定属性v-bind,简写：
     data(){
        return {
            imgSrc:"../images/1.png",
            imgAlt:"alt"
        }
    }
    <img :src="imgSrc" />

    动态数据：
    <img :src="imgSrc" :[imgAlt]="图片"/>


4.  循环数据

    <ul>
        <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </ul>

## 事件

###  事件 

 @click

###  事件对象
    <button data-id="122" @click="eventFn($event)">事件对象</button>

 
    eventFn(e){
        //改变样式
        e.srcElement.style.background="red"
        // 获取自定义属性的值
       console.log( e.srcElement.dataset.id)
       //阻止默认事件
        e.preventDefault()
        //阻止冒泡
        e.stopPropagation()
    }
    注意： @click="eventFn($event)" 这边必须是$event，方法里面的可以随便写，比如e


    多个参数的话。

    <button data-id="122" @click="eventFn('参数',$event)">事件对象</button>
    eventFn(msg,e){ 

    }

### 多事件处理程序

    事件间加“ ; ”
    <button data-id="122" @click="one($event);two($event)">多个方法</button>

    methods:{
        one(e) {
			console.log("one", e.srcElement.dataset.id);
		},
		two($event) {
			console.log("two:", $event);
		}
    }

### 事件修饰符

  在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：


    .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

    .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

    .capture：与事件冒泡的方向相反，事件捕获由外到内

    .self：只会触发自己范围内的事件，不包含子元素

    .once：只会触发一次


<a href="https://www.baidu.com/" @click.prevent="fn">跳转</a>

这时a 就不能跳转了，只能执行fn的方法

### 按键修饰符【非兼容】

vue3 官网： https://v3.cn.vuejs.org/guide/migration/keycode-modifiers.html#_2-x-%E8%AF%AD%E6%B3%95


常用的键提供别名：

.enter

.tab

.delete(同时捕获删除和退格 键)

.esc

.space

.up

.down

.left

.right

## 双向数据绑定【 v-model】

 

## 操作dom 用的ref

<div ref="ss">

this.$refs.ss

## 表达式

1.  三元

{{flag=='false'?" this is false":"this is true"}}

:class="[lineAnimated==false?'tab__item-title':'item']"

:class="{active: (selectedCourse === c)}"

:style="{backgroundColor: (selectedCourse === c)?'#ddd':'transparent'}"

:style="{backgroundImage: 'url('+require(`${item}`) +')' }"

<img :src="require(`${item}`)" alt />

:style="{transform:'rotate('+deg+'deg)'}"

:style="{marginTop:$pxToRem(40),backgroundImage:'linear-gradient(#929396, #86878a)'}"


2. v-if  v-else-if  v-else 和v-show 区别

v-if  dom 是不存在，v-show 是存在，只是隐藏而已

v-if 是dom 操作，v-show 只是css的隐藏，一般来说说，v-if有更好的切换开销，而v-show 有更高的初始渲染开销，因此，如果是需要非常频繁的切换，则使用v-show 比较好

## 计算属性

A值的改变 是因B值,或是更多的值的改变而改变 ，这时可以采用 计算属性

## watch 监听数据变化

观察vue实例上的数据变动， 简单的理解就是监听data，props的里面值的前后变化

## watch,computed区别 

1. computed 定义了就不能定义在data,props，所以一般是vuex中的state用，watch是针对data,props的变量进行监听

2. computed是针对新变量，watch是针对已经存在的变量

3. computed是 A值的改变 是因B值,或是更多的值的改变而改变;watch 是观察vue实例上的数据变动， 简单的理解就是监听data，props的里面值的前后变化

## 组件

单文件组件：就是模块的组件，my-home

定义组件

注册组件/挂载组件

components: {
    my-home
}


## vue 传值

A. 父 子 传值 使用props接受 

    props 可以直接用  默认类型
    props:{
        list:{
            type:Array ,
            default: () => [1, 2, 3, 4, 5]
        }
    }
    或是：
        props:['list']
        
    vue props 传递函数：
        <children :add='childrenClick'></children>
        methods: {
            childrenClick(c){
                console.log(c,'子组件传递过来')
            }
        },
        
        // 子组件
        <button @click="handClick(count)">点击加 1 </button>
        export default {
            data() {
                return {
                    count:1,
                }
            },
            props:{
                add:{
                    type: Function
                }
            },
            methods: {
                handClick(){
                    this.add( ++this.count); // 父组件方法
                }
            },
        }


    this 传值：

    home:
        <header :home="this"/>
        data() {
            return {
                count:1,
                name:"黄小"
            }
        },
        methods: {
            handClick(){
                this.add( ++this.count); // 父组件方法
            }
        },

    header:  

        <div>{{home.name}}</div>

        这边可以获取home组件 的data和methods

    补充：props 验证

     props:{
        list:{
            type:Array ,
            default: () => [1, 2, 3, 4, 5]
        },
        num:{
            type:String   
        }
    }

    // 如果 num 是字符串 如果传数字，那这样就会报错，只能传字符串

    
B.子 父 传值 父亲写事件函数 子 $emit触发 传值

  父：
    <Headers ref="headerRef" @call-val="callValFn"></Headers>
    
    callValFn(item) {
        console.log("items:", item);
    },
    
    子：
    <button @click="butFn">获父组件的值和方法</button>
    
    getName() {
    let val ="$emit 传值";
        this.$emit("call-val", val);
    },


C.兄弟传值 $bus 中转站

D.如果组件之间 关系很远 是很多组件都要用的值 vuex


补充：

父组件主动获取子组件的数据，方法

base.vue

    <Headers ref="headerRef"></Headers>
	<button @click="getChildFn">获取子组件headers的属性及方法</button>
    data() {
		return {
			msg: "父组件",
		};
	},

    //父组件主动获取子组件的数据，方法
    getChildFn() {
        console.log(this.$refs.headerRef.name, "ssss ddd");
        this.$refs.headerRef.getName();
    },
    fatherFn() {
			console.log("父组件的方法");
		},


子组件主动获取父组件的数据，方法

headers.vue

    <template>
	<div>
		<p>头部:{{name}}</p>
		<button @click="butFn">获父组件的值和方法</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			name: "刘协议"
		};
	},
	methods: {
		getName() {
			console.log("子组件的方法");
		},
		butFn() {
			console.log(this.$parent.msg);
			this.$parent.fatherFn();
		}
	}
};


## 单向数据流

https://blog.csdn.net/wu_xianqiang/article/details/88946735

单向数据流：父组件可以向子组件传递数据，但是子组件不能直接修改父组件的状态

https://blog.csdn.net/qq_34035425/article/details/82499820?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=4b589419-cacb-4b4f-94e7-e6f6e777fcfd&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

### 单向数据流跟 双向绑定

单向数据流 ：父组件可以向子组件传递数据，但是子组件不能直接修改父组件的状态

双向绑定：v-model在dom 节点时，data的值会绑定在dom 中，当dom 修改这个值时 data的值也会发生改变，这就是双向数据绑定，也就是MVVM,model改变会影响视图,视图改变改影响model



## 自定义组件 双向绑定

base.vue:

    <div>自定义组件 双向绑定:{{vmodelVal}}</div>
	<Headers ref="headerRef" v-model:keyword="vmodelVal" @call-val="callValFn"></Headers>


Headers.vue

<template>
	<div>
		<input :value="keyword" @input="$emit('update:keyword',$event.target.value)" />
	</div>
</template>

<script>
import event from "../model/event";
export default {
	data() {
		return {
			name: "刘协议"
		};
	},
	props: ["keyword"]
};
</script>


# vue3

## 非父子组件传值

使用mitt 插件 【https://github.com/developit/mitt】

1. 安装插件：npm install --save mitt

2. 引入插件： src/ model/event.js

    // using ES6 modules
    import mitt from 'mitt'

    const event = mitt()


    export default event

3. mitt 组件
 
<template>
	<div>
		使用mitt 插件 非父子组件传值
		<Headers ref="headerRef" @call-val="callValFn"></Headers>
	</div>
</template>

<script>
import event from "./../model/event";
import Headers from "../components/headers.vue";
export default {
	components: {
		Headers
	},
	mounted() {
		event.on("headerFn", e => {
			console.log("mitt 监听 子组件传过来的值：", e);
		});
	},
	methods: {
		// 子组件主动获取父组件的数据，方法
		fatherFn() {
			console.log("父组件的方法");
		}
	}
};
</script>

4. headers

<template>
	<div>
		<p>头部:{{name}}</p>
		<button @click="mittFn">mitt 组件传值</button>
	</div>
</template>

<script>
import event from "../model/event";
export default {
	data() {
		return {
			name: "刘协议"
		};
	},
	methods: {
		mittFn() {
			event.emit("headerFn", "mitt传值");
		}
	}
};
</script>

## 新特性

## 组合式 API 也就是composition-api

(1) vue2 组件的局限性

 1. 组件越大，可续性越差

 2. 相同的代码逻辑很难在多个组件中复用

### composition-api优点

1. 提供了更完善的ts支持
2. 组件拥有了更加良好的代码组织结构
3. 相同的代码逻辑在不同的组件中进行了完整的复用

### 提供以下几个函数

 1. setup  :组合api 的方法都是写在这里面的
 2. ref ： 定义响应式数据 字符串 bool 
 3. reactive ：定义响应式数据   对象
 4. watchEffet ：监听数据变化
 5. watch ：监听数据变化
 6. computed ：计算属性
 7. toRefs  ：解构响应式对象数据
 8. 生命周期的hooks

#### setup

https://v3.cn.vuejs.org/guide/composition-api-setup.html#%E5%8F%82%E6%95%B0

1. setup 函数会在 beforeCreate、created 之前执行,setup的生命周期 在 beforeCreate、created 之后执行

2. setup 有2个参数

    props 的父组件传递过来的参数
    ctx 上下文对象
        ctx.attrs
        ctx.slots
        ctx.parent
        ctx.root
        ctx.emit
        ctx.refs

3. 在 setup() 函数中无法访问到 this【没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。】

4. 执行 setup 时，组件实例尚未被创建,你只能访问以下 property【props,attrs, slots, emit 】,你将无法访问以下组件选项【data，computed ，methods】

<template>
	<div class="setup">
	</div>
</template>

<script>
export default {
	setup() {
		console.log('setup')
	},
	beforeCreate() {
		// console.log("beforeCreate");
	},
	created() {
		// console.log("created");
	}
};
</script>


#### ref ,reactive 定义响应式数据

ref 【定义字符串，num,bool，数组】 

reactive【定义对象】

<template>
	<div class="setup">
		<h2>1.ref ,reactive 定义响应式数据</h2>
		<div>{{title}}{{userInfos.username}}---{{userInfos.age}}</div>
        <br />
        <button @click="getUserName">获取用户名称</button>
        <div>双向数据绑定 影响ref,reactive</div>
		<br />
		<input v-model="title" />
		<input v-model="userInfos.username" />
	</div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
	setup() {
        var title = ref("用户信息：");
        const repositories = ref([]);// 定义数组
		var userInfos = reactive({
			username: "张三",
			age: 20
        });
        // 定义方法
		var getUserName = () => {
            // 获取reactive的数据
            console.log("username:", userInfos.username);
            //获取ref 的数据
            console.log("title:",title.value);

            	// 修改reactive的数据
			userInfos.username = "张艺";
			//修改ref 的数据
			title.value = "改变用户信息：";
		};
		return {
			title,
			userInfos,
			getUserName
		};
	}
};
</script>

使用 ref 还是 reactive 可以选择这样的准则

第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性
第三, 一般ref定义字符串，num ,布尔型，数组；reactive 定义的是对象



reactive 相当于 Vue 2.x 中的 Vue.observable() API 

ref

https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html#ref-%E5%B1%95%E5%BC%80

声明响应式状态：
ref reactive

这就是 Vue 响应性系统的本质:

该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property


#### toRefs 解构响应式对象数据


<h2>2.toRefs 解构响应式对象数据</h2>
{{worksName}}
<input v-model="worksName" />

setup() {
	// 2.toRefs 解构响应式对象数据
    var worksInfos = reactive({
        worksName: "张三",
        worksDesi: "到好多好好的"
    });
    return {
       ...toRefs(worksInfos) //...worksInfos  这样的话可以显示数据，但是不能双向绑定数据
    };
}


#### computed 计算属性 【只能在setup】


    <input v-model="firstName" />
    <input v-model="lastName" />
    <div>{{fullName}}</div>

    setup() {

		//3.computed ：计算属性
		var userInfos2 = reactive({
			firstName: "王",
			lastName: "一搏"
		});

		var fullName = computed(() => {
			return userInfos2.firstName + userInfos2.lastName;
		});

		return {
			...toRefs(userInfos2),
			fullName
		};

#### readonly "深层"的只读代理 （少用）

将响应式 数据（ref,reactive定义的数据），转正非响应式的数据（也就是原始数据）

readonly 传入一个对象（响应式对象），返回一个原始对象 只能读取不能修改。

var obj={
    username:"李小英"
}

obj 就是原始数据， 可以渲染在页面中，但是不能双向绑定


var userInfos = reactive({
    username: "张三",
    age: 20
});

userInfos  响应式数据，

可以把响应式数据 转成非响应式数据，

const copy = readonly(userInfos) //copy.username 只能读取，不能修改

####  watchEffet 监听数据变化

    在响应式地跟踪其依赖项时，立即运行一个函数，并在更改依赖项时重新运行它。

    <h2>4.watchEffet 监听数据变化 --侦听器</h2>
    <div>{{data.count}}</div>
    <button @click="stop">手动关闭侦听器</button>

    const data = reactive({
        count: 1,
        num: 1
    });
    const stop = watchEffect(() => {
        console.log("侦听器：", data.count);
    });
    setInterval(() => {
        data.count++;
    }, 1000);


#### watch , watch与watchEffect区别


(1).watch与watchEffect区别：

const data = reactive({
    count: 10,
    num: 1
});

1. 懒执行，也就是说只有侦听的值变更时才执行回调

    watchEffect(() => {
	    console.log("侦听器：", data.count);// 可以输出1
	});
    watch(data, () => {
        console.log("watch 监听：", data.count);// 输出2
    });

    watch  只有监听到值（data.count）发生变化 才执行，watchEffect都可以执行


2. 更明确哪些状态的改变会触发侦听器重新运行

    
    watchEffect 可以监听具体的对象【如：data.count】，watch 只能监听ref或是reactive定义的对象【如： data】


3. 访问侦听状态变化前后的值

    watch(numVal, (newVal, oldVal) => {
        console.log("numVal新值跟旧值的变化:", newVal, oldVal);
    });


(2). eg：
    <h2>5.watch 监听数据变化 --侦听器</h2>
    <div>{{data.count}}</div>
    <div>watch 双向数据绑定，前后数据</div>
    {{numVal}}
    <input v-model="numVal" />
	<input v-model=data.count"/>

	const data = reactive({
		count: 10,
		num: 1
	});
	// (1).简单的引用
    // 要监听对象data ，但是不能监听对象里的值data.count
    watch(data, () => {
        console.log("watch 监听：", data.count);
    });
    setInterval(() => {
        data.count++;
    }, 1000);

    var numVal = ref("1");
	// (2).watch 的两个参数，代表新的值和旧的值
	watch(numVal, (newVal, oldVal) => {
		console.log("numVal新值跟旧值的变化:", newVal, oldVal);
	});

	//(3). watch 多个值，返回的也是多个值的数组
	watch([numVal, data], (newValue, oldValue) => {
		console.log("old", oldValue); //["13",Proxy {count: "144", num: 1}]
		console.log("new", newValue); //["134",Proxy {count: "144", num: 1}]
	});

	// (4).使用 getter 的写法 watch reactive 对象中的一项
	watch([numVal, () => data.count], (newValue, oldValue) => {
		console.log("old", oldValue); //old (2) ["1", 10]
		console.log("new", newValue); //new (2) ["1", "103"]
		console.log("updated:" + numVal.value + data.count); //updated:1103
	});


#### 生命周期

https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

都是 setup () 内部调用生命周期钩子，没有beforeCreate，created ，其他都是一样

在生命周期的vue3更新：

在vue3中对生命周期钩子的命名进行一些简单的命名更新，并且在setup函数中提供了新的生命周期函数钩子。

1. 命名改变：

vue3对beforeDestroy 和destroy进行命名的修改，分别修改为beforeUnmount,unmounted。这个是命名的改变，回调时机上并没有发生任何的改变。

2. setup函数中提供了新的生命周期函数钩子

https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html



### Provide / Inject

https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html#%E8%AE%BE%E6%83%B3%E5%9C%BA%E6%99%AF

不管组件层次 结构多深，都可以使用这个Provide（传递参数） / Inject （接受参数）

### 非组合api 


app.vue

<template>
	<div>
		<div>祖父组件：{{location}}</div>
		<button @click="fn">改变location的值</button>
		<provides></provides>
	</div>
</template>
<script>

import provides from "@/views/provide.vue";
export default {
	name: "App",
	components: {
		provides
	},
	data() {
		return {
			location: "传递祖父的参数"
		};
	},
	methods: {
		fn() {
			this.location = "改变值";
		}
	},
	provide() {
		return {
			location: this.location,
			geolocation: {
				longitude: 90,
				latitude: 135
			}
		};
	}
};
</script>

provides：

<template>
	<div>
		<h2>Provide / Inject</h2>
		<loaction></loaction>
	</div>
</template>

<script>
import loaction from "../components/loaction.vue";
export default {
	components: {
		loaction
	}
};
</script>

<style>
</style>

location.vue:

<template>
	<div>
		<h5>孙组件接受参数</h5>
		<div>祖父组件定义provide，孙组件inject接受：{{location}}</div>
	</div>
</template>

<script>
export default {
	inject: ["location", "geolocation"]
};
</script>

点击fn，不能改变location.vue的值，就是没有响应的效果
没有办法 双向绑定

### 组合api  （重点）

https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html#%E4%BD%BF%E7%94%A8-provide

<template>
	<div>
		<div>祖父组件：{{location}}</div>
		<button @click="fn">改变location的值</button>
		<br />
		<br />
		<div>双向数据绑定：</div>
		姓名 {{username}}：
		<input v-model="username" />
		<provides></provides>
	</div>
</template>

<script>
import { ref, provide, reactive, toRefs } from "vue";

import provides from "@/views/provide.vue";
export default {
	name: "App",
	components: {
		provides
	},
	setup() {
		let location = ref("传递祖父的参数");
		var userInfos = reactive({
			username: "张三",
			age: 20
		});
		let fn = () => {
			location.value = "改变值";
		};
		provide("location", location);
		provide("userInfos", userInfos);
		return {
			location,
			fn,
			...toRefs(userInfos)
		};
	}
};
</script>

provides：

<template>
	<div>
		<h2>Provide / Inject</h2>
		<loaction></loaction>
	</div>
</template>

<script>
import loaction from "../components/loaction.vue";
export default {
	components: {
		loaction
	}
};
</script>

<style>
</style>

location.vue:

<template>
	<div>
		<h5>孙组件接受参数</h5>
		<div>1.祖父组件定义provide，孙组件inject接受：{{location}}</div>
		<p>用户信息： {{userInfos.username}}</p>
		<br />
		<br />
		<div>2.provide inject实现父子组件传值的时候，子组件改变数据也会影响父组件</div>
		<br />姓名：
		<input v-model="userInfos.username" />
	</div>
</template>

<script>
import { ref, inject } from "vue";
export default {
	setup() {
		let location = inject("location");
		let userInfos = inject("userInfos");
		return {
			location,
			userInfos
		};
	}
};
</script>


### 总结：

1.祖父组件定义provide，孙组件inject接受

2.provide inject实现父子组件传值的时候，子组件改变数据也会影响父组件


### 不想子组件改变父组件的数据

最后，如果要确保通过 provide 传递的数据不会被 inject 的组件更改，我们建议对提供者的 property 使用 readonly

provide("userInfos", readonly(userInfos));

## 模板引用【template refs】

当使用组合式 API 时，响应式引用【reactive refs】 和 模板引用【template refs】 的概念已经是统一的。

## 响应性

### 比较vue2 和 vue3 响应式

#### vue2 的响应式：

核心：

对象：通过defineProperty对对象的已有属性值的读取和修改进行劫持（监视、拦截）
数组：通过重写数组更新数组一系列更新元素的方法实现元素修改的劫持【简单的理解：普通数组变成响应数组，对一个数组的元素进行更改的话，它会对这个更改的方法进行重新编写】

object.defineProperty(data,'count',{
	get(){},
	set(){}
})

问题：
1. 对象直接新添加的属性或删除已有属性，界面不会自动更新
2. 直接通过下标替换元素或更新length，界面不会自动更新 arr[1] ={}


所以后面才有$set，去响应数据

eg:
	<div>
		<div v-for="(key,val,index) in user" :key="index">{{key}}:{{val}}</div>
		<button @click="add">修改数据</button>
	</div>

	//因为vue2 是通过object.defineProperty 来操作数据，所以不能检测数据的变动（虽然打印出来的数据是更新的，但是界面的数据没更新）
	export default {
		data() {
			return {
				user: {
					name: "王一博",
					age: 20
				}
			};
		},
		methods: {
			add() {
				this.user.sex = "男";
				console.log( this.user);
			}
		}
	};

  注意同样的代码在vue3 里面就可以。不旦数据更新，界面也更新。原因是vue3使用prory

#### vue3 的响应式：

核心：

1.通过proxy（代理）：拦截对data任意属性的任意（13种）操作，包括属性值的读写，属性的添加，属性的删除等


2.通过reflect（反射）：动态对被代理对象的相应属性进行特定的操作


### 什么是响应式

	响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。

简单的理解：对对象进行修改，对象数据会改变，界面上也会发生改变

### 深入vue3响应性原理

就是把目标对象变成代理对象（prory）,然后通过代理对象对数据进行操作，通过reflect在反射回来。


### 什么是prory

proxy 是一个对象，可以代理一个对象或函数，允许拦截被代理的对象或函数

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy[proxy]

### Reflect 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect[reflect]


## 有意思的Teleport

https://v3.cn.vuejs.org/guide/teleport.html[官网]

teleport 是vue3 内置组件，接受2个函数（to:指定将在其中移动 <teleport> 内容的目标元素 如：body,.home ,#home;disabled :禁止使用该功能）

请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。

核心就是to的操作

## 注意点

### 值得注意的新特性

Vue 3 中需要关注的一些新功能包括：

组合式 API
Teleport
片段
触发组件选项
来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器
单文件组件组合式 API 语法糖 (<script setup>) 实验性
单文件组件状态驱动的 CSS 变量 (<style vars>) 实验性
单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则



### 全局 API

全局 Vue API 已更改为使用应用程序实例
全局和内部 API 已经被重构为可 tree-shakable

### 模板指令

组件上 v-model 用法已更改，替换 v-bind.sync
<template v-for> 和非 v-for 节点上 key 用法已更改
在同一元素上使用的 v-if 和 v-for 优先级已更改
v-bind="object" 现在排序敏感
v-on:event.native 修饰符已移除
v-for 中的 ref 不再注册 ref 数组


### 组件

只能使用普通函数创建功能组件
functional 属性在单文件组件 (SFC) <template> 和 functional 组件选项被抛弃
异步组件现在需要 defineAsyncComponent 方法来创建
组件事件现在需要在 emits 选项中声明

### 渲染函数

渲染函数 API 改变
$scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露
$listeners 被移除或整合到 $attrs
$attrs 现在包含 class and style attribute

### 自定义元素

自定义元素白名单现在已经在编译时执行
对特殊的 is prop 的使用只严格限制在被保留的 <component> 标记中

### 其他小改变

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
default prop 工厂函数不再可以访问 this 上下文
自定义指令 API 已更改为与组件生命周期一致
data 选项应始终被声明为一个函数
来自 mixin 的 data 选项现在为浅合并
Attribute 强制策略已更改
一些过渡 class 被重命名
<TransitionGroup> 不再默认渲染包裹元素
当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则需要指定 deep 选项
没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。
在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。

### 移除 API

keyCode 支持作为 v-on 的修饰符
$on，$off 和 $once 实例方法
过滤
内联模板 attribute
$children 实例 property
$destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。