vue2.7 过度,升级指南

发布时间:2023-11-14 15:30

 

vue 2.7版本详解

自从 vue3 [代号:海贼王] 在 2022年2月7日 成为默认版本后,vue2 将在 2023年底 彻底结束。

那么最近7月1日发布的,vue2 的最后 2.7 版本 [代号:火影忍者又能有什么用呢?

 vue2.7正是为了解决过度问题,增加了部分vue3的写法和特性,又保留vue2原始特性。

\"9f1a8f84bdd74be286ed77d182ce8e97.jpeg\"

Ⅰ.适用场景

        如果 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 文件 => 修改配置如:

\"34611263139d469d8b78cf3def8bd7f9.png\"

 ③修改配置后: 执行命令   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">   写法并不支持
  • 不支持异步组件初始化
  • ...

 

 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号