vue2.7 过度，升级指南

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