[JavaScript知识库]vue2.7 火影版本，难道只是vue3的过度版？

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">? ?写法并不支持
• 不支持异步组件初始化
• ...