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() 函数 + （ 单文件组件 ）
- 组合 API （reactive 、ref 、watch …）
- CSS v-bind （单文件组件）
- Api模块化（如： import { nextTick } from ‘vue’ ; ）
- defineComponent() 重载函数
- 支持emits对象
- …
Ⅲ.升级指南
①删除根目录的 node_modules文件夹 和 package-lock.json
②打开 package.json 文件 => 修改配置如：
③修改配置后： 执行命令 npm i 下载升级后的三方件包。
Ⅳ. 新增内容用法和详解
① setup() 函数 和 （ 单文件组件 ）
{{ num }}
import { ref } from 'vue';export default {setup() {const num = 123;function add(){ num.value++;}return { num, add };},}---------------------------------------------- import { ref } from 'vue'; const num = ref(18); function add(){num.value++; }② 组合 API （reactive 、ref 、watch …）
{{ num }}
import { ref , watch } from 'vue'; const num = ref(18); function add(){num.value++; } watch(num ,(now , old)=>{ console.log( 'num更新了=>' + num ) }) ③ CSS v-bind （单文件组件）
import { ref } from 'vue'; const bool = ref(false); const color = ref('red'); function colorChange(){ bool.value = !bool.value; bool.value" />④ defineComponent() 重载函数 最重要作用是：在TypeScript下，给予了组件 正确的参数类型推断 。
封装其实意义不大，如：
export function defineComponent(options: unknown) {return isFunction(options) ? { setup: options } : options}
⑤ 支持emits对象
主要是子组件调用父组件的方法，起到一个验证作用 =>
① 子组件 如：
export default {emits:{toFather: (bool) { retrun bool }; //=>传入true 才会验证通过 //toFather: null非验证},setup(props,{emit}) {function childClick(){emit('toFather', true);}return { childClick};},}
②父组件 如：
import Btn from './Btn.vue'export default {setup() {function fun(){ console.log('被子组件 调用了！')}return { fun };},}
Ⅳ. 注意事项
- reactive( {a:1} ) === { a:1 } 并为和vue3一样 ，采用 proxy 对象，只是写法一样。
- 写法并不支持
- 不支持异步组件初始化
- ...