vue 2.7版本详解
自从 vue3 [代号：海贼王] 在 2022年2月7日 成为默认版本后，vue2 将在 2023年底 彻底结束。
那么最近7月1日发布的，vue2 的最后 2.7 版本 [代号：火影忍者] 又能有什么用呢？
vue2.7正是为了解决过度问题，增加了部分vue3的写法和特性，又保留vue2原始特性。
Ⅰ.适用场景
如果 ui框架和一些三方件 还没有升级到 vue3.x , 这时可以先升级到 vue2.7，用 vue3的写法，去开发 vue2 新页面。
等到三方件和ui框架升级后，我们就可以直接去升级vue3.x，之前用vue3写法开发的页面会享受到 vue3 代理对象proxy的优势； 那么之前 vue2语法， vue3也是兼容的，只是数据响应速度和性能还是vue2的程度。
Ⅱ.更新内容 （详解 => Ⅳ）
- setup() 函数 + <script setup> （ 单文件组件 ）
- 组合 API （reactive 、ref 、watch ...）
- CSS v-bind （单文件组件）
- Api模块化（如： import { nextTick } from ‘vue’ ; ）
- defineComponent() 重载函数
- 支持emits对象
- ...
Ⅲ.升级指南
①删除根目录的 node_modules文件夹 和 package-lock.json
②打开 package.json 文件 => 修改配置如：
③修改配置后： 执行命令 npm i 下载升级后的三方件包。
Ⅳ. 新增内容用法和详解
① setup() 函数 和 <script setup> （ 单文件组件 ）
-
<template>
-
<div>
-
<h3> {{ num }}
</h3>
-
<button @click = "add"> 增加+1
</button>
-
</div>
-
</template>
-
<!-- 1. setup函数写法 -->
-
<script>
-
import { ref }
from
'vue';
-
export
default {
-
setup(
) {
-
const num =
123;
-
function
add(
){
-
num.
value++;
-
}
-
return { num, add };
-
},
-
}
-
</script>
-
----------------------------------------------
-
-
<!-- setup单文件组件写法 -->
-
<script setup>
-
import { ref }
from
'vue';
-
const num =
ref(
18);
-
function
add(
){
-
num.
value++;
-
}
-
</script>
② 组合 API （reactive 、ref 、watch ...）
-
<template>
-
<div>
-
<h3> {{ num }}
</h3>
-
<button @click = "add"> 增加+1
</button>
-
</div>
-
</template>
-
<script setup>
-
import { ref , watch }
from
'vue';
-
const num =
ref(
18);
-
function
add(
){
-
num.
value++;
-
}
-
watch(num ,
(now , old)=>{
console.
log(
'num更新了=>' + num ) })
-
-
</script>
③ CSS v-bind （单文件组件）
-
<template>
-
<div>
-
<div class='box'>
</div>
-
<button @click='colorChange'>更换颜色
</button>
-
</div>
-
</template>
-
<script setup>
-
import { ref }
from
'vue';
-
const bool =
ref(
false);
-
const color =
ref(
'red');
-
function
colorChange(
){
-
bool.
value = !bool.
value;
-
bool.
value?color.
value=
'red':color.
value=
'blue';
-
}
-
</script>
-
<style scoped>
-
.box{
-
width:
100px;
-
height:
100px;
-
background:
v-bind(
'color');
-
}
-
</style>
④ defineComponent() 重载函数
最重要作用是：在TypeScript下，给予了组件 正确的参数类型推断 。
封装其实意义不大，如：
-
<!-- 只是对setup函数进行封装，返回options的对象 -->
-
<script>
-
export
function
defineComponent(
options: unknown) {
-
return
isFunction(options) ? {
setup: options } : options
-
}
-
</script>
⑤ 支持emits对象
主要是子组件调用父组件的方法，起到一个验证作用 =>
① 子组件 如：
-
<template>
-
<div>
-
<button @click = "childClick"> 按钮
</button>
-
</div>
-
</template>
-
<script>
-
export
default {
-
emits:{
-
toFather: (bool) { retrun bool };
-
//=>传入true 才会验证通过
-
//toFather: null 非验证
-
},
-
setup(
props,{emit}) {
-
function
childClick(
){
-
emit(
'toFather',
true);
-
}
-
return { childClick};
-
},
-
}
-
</script>
②父组件 如：
-
<template>
-
<div>
-
<Btn @toFather = "fun"/>
-
</div>
-
</template>
-
<script>
-
import
Btn
from
'./Btn.vue'
-
export
default {
-
setup(
) {
-
function
fun(
){
-
console.
log(
'被子组件 调用了！')
-
}
-
return { fun };
-
},
-
}
-
</script>
Ⅳ. 注意事项
- reactive( {a:1} ) === { a:1 } 并为和vue3一样 ，采用 proxy 对象，只是写法一样。
- <script lang= "ts"> 写法并不支持
- 不支持异步组件初始化
- ...
转载：https://blog.csdn.net/weixin_42232622/article/details/125792343
查看评论