vue 2.7版本详解
自从 vue3 [代号:海贼王] 在 2022年2月7日 软件定制开发供应商成为默认版本后,vue2 将在 2023年底 彻底结束。
那么最近7月1日发布的, 的最后 2.7 版本 [代号:火影忍者] 软件定制开发供应商又能有什么用呢?
vue2.7软件定制开发供应商正是为了解决过度问题,增加了部分的写法和特性,又保留vue2原始特性。
Ⅰ.适用场景
如果 ui框架和一些三方件 还没有升级到 vue3.x , 这时可以先升级到 vue2.7,用 vue3的写法,去开发 vue2 新页面。
等到三方件和升级后,我们就可以直接去升级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"> 写法并不支持
- 不支持异步组件初始化
- ...