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