Vue3：不常用的Composition API && Fragment、Teleport、Suspense && 与Vue2对比的一些变化
作者：互联网
1 # 一、Vue3不常用的Composition API
2 # 1.shallowReactive与shallowRef
3 .shallowReactive: 只处理对象最外层属性的响应式（浅响应式）
4 .shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
5 什么时候用:
6 如果一个对象数据，结构比较深，但变化只是外层属性变化 ===> shallowReactive。
7 如果一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换 ===> shallowRef。
8 # 2.readonly 与 shallowReadonly
9 readonly: 让一个响应式数据变为只读的（深只读）
10 shallowReadonly： 让一个响应式数据变为只读的（浅只读）
11 应用场景：不希望数据被修改时
12 # 3.toRaw与markRaw
13 toRaw:
14 作用：可以将一个有reactive生成的响应式对象转为普通对象。
15 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的更新
16 注意！！！：当你对转换后的普通对象进行修改的时候，界面不会更新，但响应式对象的值却会改变。
17 markRaw:
18 作用：可以标记一个对象为不可响应式对象，使其永远不会再成为响应式对象。
19 使用场景：1.有些值不应该被设置为响应式的，例如复杂的第三方类库等。2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
20 # 4.customRef
21 # 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制
22 # 例子:
23 <template>
24 <input type="text" v-model="inputText" />
25 <h3>{{inputText}}</h3>
26 </template>
27
28 <script>
29 import {ref, customRef} from 'vue'
30 export default {
31 name: 'HelloWorld',
32 setup(){
33 function myRef(value, delay){
34 let timer;
35 return customRef((track,trigger)=>{
36 return {
37 get(){
38 console.log(`有人从myRef这个容器中读取了数据，我把${value}给它了！`);
39 track();// 通知Vue追踪value的变化（提前和get商量一下，让它认为这个value是有用的）
40 return value;
41 },
42 set(newValue){
43 console.log(`有人吧myRef这个容器中数据改为了：${newValue}`);
44 clearTimeout(timer);
45 timer = setTimeout(()=>{
46 value = newValue;
47 trigger(); // 通知Vue去重新解析模板
48 },delay);
49 }
50 }
51 });
52 }
53 let inputText = myRef('hello', 500);
54 return {
55 inputText
56 }
57 }
58 }
59 </script>
60 # 5.provide 与 inject
61 # .作用：实现祖与后代组件间通信
62 # .套路：父组件有一个provide选项来提供数据，后台组件有一个inject选项来开始使用这些数据
63 # .具体用法：
64 # 祖组件中：
65 setup(){
66 ...
67 let car = reactive({name:'奔驰',price:'40W'});
68 provide('car', car);
69 ...
70 }
71 # 后代组件中：
72 setup(){
73 ...
74 const car = inject('car');
75 return{car}
76 }
77 # 6.defineAsyncComponent 异步组件
78 # 作用：非异步组件，vue只有将所有组件都准备好了之后同一显示，如果组件加载耗时较长的话，就会导致页面空白一段事件
79 # 语法：
80 import {defineAsyncComponent} from 'vue';
81 const Child = defineAsyncComponent(()=>import('./components/Child.vue'));
82 # 6.响应式数据的判断（只有一个参数：要检查的对象。返回bool值）
83 isRef: 检查一个值是否为一个ref对象
84 isReactive: 检查一个对象是否是由reactive创建的响应式代理
85 isReadonly: 检查一个对象是否有readonly创建的只读代理
86 isProxy: 检查一个对象是否有reactive或者readonly方法创建的代理
87
88 # 二、新的组件
89 # 1.Fragment
90 # .在Vue2中：组件必须有一个根标签
91 # .在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragement虚拟元素中
92 # .好处：减少标签层级，减少内存占用
93 # 2.Teleport
94 # .什么是Teleport：一种能够将我们的组件html结构移动到指定位置的技术
95 <template to="如：body、#divid">
96 <div v-if="isShow" class="mask">
97 <div class="dialog" class="dialog">
98 <h3>我是一个弹窗</h3>
99 <button @click="isShow=false">关闭弹窗</button>
100 </div>
101 </div>
102 </template>
103 <style>
104 .mask{
105 position: absolute;
106 top:0,bottom:0,left:0,right:0;
107 background-color: rgba(0,0,0,0.5);
108 }
109 .dialog{
110 position: absolute;
111 top: 50%;
112 left: 50%;
113 transform: translate(-50%, -50%);
114 text-align: center;
115 width: 300px;
116 height: 300px;
117 background-color: green;
118 }
119 </style>
120 # 3.Suspense
121 # .作用：等待异步组件一些额外内容，让应用有更好的用户体验
122 # .例子：
123 # 异步引入组件
124 import {defineAsyncComponent} from 'vue';
125 const Child = defineAsyncComponent(()=>import('./components/Child.vue'));
126 # 使用Suspense包裹组件，并配置好default与fallback
127 <template>
128 <div class="app">
129 <Suspense>
130 <template v-solt:defalt>
131 <Child />
132 </template>
133 <template v-solt:fallback>
134 <h3>加载中...</h3>
135 </template>
136 </Suspense>
137 </div>
138 </template>
139 # 三、Vue2与Vue3的一些变化调整
140 # 1.Vue3.0中将全局API，即：Vue.xxx调整到应用实例(app)上
141 Vue.config.xxx app.config.xxx
142 Vue.config.priductionTip Vue3中移除了
143 Vue.component app.compoent
144 Vue.directive app.directive
145 Vue.mixin app.mixin
146 Vue.use app.use
147 Vue.prototype app.config.globalProperties
148 # 2.data选项应始终声明为一个函数
149 # 3.过渡类名的更改：
150 # Vue2中的语法
151 .v-enter,
152 .v-leave-to{opacity:0;}
153 .v-leave,
154 .v-enter-to{opacity:1;}
155 # Vue3中的语法
156 .v-enter-from,
157 .v-leave-to{opacity:0;}
158 .v-leave-from,
159 .v-enter-to{opacity:1;}
160 # 4.移除keyCode作为v-on的修饰符，同时也不再支持config.keyCodes
161 # 5.移除v-on.native修饰符
162 # 父组件中绑定事件
163 <my-component v-on:close="handeleComponentEvent1" v-on:click="handeleComponentEvent2"/>
164 # 子组件中声明定义
165 export default{
166 emits: ['close'] // 这里没有接收的事件都是原生事件
167 }
168 # 6.移除了过滤器(filter)
169 过滤器虽然看起来很方便，但它需要一个自定义语法，打破大括号内表达式"只是JavaScript"的假设，这不仅有学习成本，而且有实现成本！建议用方法或计算属性去替换过滤器。
170
标签：Teleport,Vue,&&,对象,car,app,响应,Vue2,组件 来源： https://www.cnblogs.com/watermeloncode/p/16478004.html