vue2.0缺陷

    Vue 2 响应式并不是真正意义上的代理，而是基于 Object.defineProperty() 实现的。
    这个 API 并不是代理，而是对某个属性进行拦截，所以有很多缺陷，比如：删除数据就无法监听，需要 $delete 等 API 辅助才能监听到。
    并且，Option API 在组织代码较多组件的时候不易维护。对于Option API 来说，所有的 methods、computed 都在一个对象里配置，这对小应用来说还好。但代码超过 300 行的时候，新增或者修改一个功能，就需要不停地在 data，methods 里跳转写代码，我称之为上下反复横跳。

 

vue3.0做了哪些改变？
响应式系统:
                Vue 2 的响应式机制是基于 Object.defineProperty() 这个 API 实现的，此外，Vue 还使用了Proxy，这两者看起来都像是对数据的读写进行拦截，但是 defineProperty 是拦截具体某个属性，Proxy 才是真正的“代理”。
全部模块使用 TypeScript 重构
                类型系统带来了更方便的提示。
Composition API 组合语法：
              <script setup></script>。

setup初始化数据

在vue2中 我们一般使用data函数初始化一些数据或者变量  vue3新增setup 变量包括方法都是在该函数里定义的。

setup中我们并不能直接使用this 可以试着打印this变为了undefined。在setup中如果我们需要使用到响应数据时 需要通过.value获取：

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0

ref函数

在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

<template>
  <div> 
    <h1>{{mycount}}</h1> 
    <button @click="changeMyCount">changeMyCount</button> 
  </div> 
</template> 
<script> 
  import { ref } from "vue"; 
  export default { 
    name: "ref", 
    setup(){ 
      const mycount = ref(2); 
      const changeMyCount = ()=>{ 
        mycount.value = mycount.value + 2 ; 
      } 
      return { mycount, changeMyCount, } 
    } 
  }; 
</script>

 

TypeScript

类型注解

typescript支持静态类型 也就是说可以声明变量的类型声明变量类型后，其他任何类型的赋值都会引起编译错误  总体来说typescript更加严格 使代码更加规范

基础类型

let age:number = 18;

let name:string = ‘cyp’;

let weight:string | number = 120;         // true

let weight:string | number = ‘120kg';   // true

let weight:string | number = true;        // error
any任意类型

 

void没有任何类型

 

never用不存在的类型

 

数组类型
let arr:number[ ] = [1,2,3];

let arr:number[ ] = [1,’2’,3];  // error

let arr:string[ ] = [‘1’,’2’,’3’];

let arr:[number,string] = [1,’cyp’];

let arr:[number,string] = [1,’string’,true]  //error
函数类型
function todo(x:number, y:number):number{ return x+y }; todo(1,2);

 
可选参数-?(可选参数要放在函数入参的最后面，不然会导致编译错误)：

function todo(x:number, y:number, z?:number):number{ return x+y }; todo(1,2); todo(1,2,3);

 

永远年轻，永远热泪盈眶。