标签：Teleport Vue && 对象 car app 响应 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。