vue3

• vue3新特性 1.数据响应式原理重新实现(ES6 proxy 代替了ES5的Object.defineProperty) Vue.set()
  解决了:例如数据更新检测bug vue2的push,shift 不是原生js的方法,vue二次封装了
  大大优化了响应式监听的性能(可以监听复杂的数据类型)
  2.虚拟dom-新算法(更快,更小)
  3.提供了composition api ,可以更好的 逻辑复用
  4.模版可以有多个根元素
  5.源码typescript重写,有更好的类型推导
  6.移除了过滤器 推荐使,计算属性
  vite的使用
  vite低配版的vue-cli,企业做项目还是用vue-cli

• vue3.0是 composition API 组合式api

import { setup, reactive ,ref,computed,toRefs,watch } from 'vue'

1.setup函数 入口
2.reactive 函数 ,让复杂数据类型变成响应式
3.ref函数,将基本数据类型变成响应式
4.toRefs-解构保留响应式状态
5.readonly 让数据变成只读状态

export default {
   setup(){


  }      
}

setup函数中定义的数据/方法 ...计算属性...都需要返回

setup函数中定义的数据默认不是响应式的

如果定义的复杂数据类型需要是响应式的,就必须要用reactive()函数包裹 数组,对象

如果将基本数据类型处理成响应式,就需要用到ref()函数

export default {
   setup() {
     //const obj = {name:'zs',age:12}
     const obj = reactive({name:'zs',age:12})       //const money = reactive(100) 报错
     const changeName =()=>{
       obj.name ='李四'
       console.log(obj)
     }
   } 
   return  {
       obj,
       changeName,       //money 报错不用
   }
}

• ref()函数

作用:将简单类型数据,转换成响应式对象

1.ref函数接受一个简单类型的值,返回一个可改变的ref响应式对象,返回的对象有唯一的属性 value

2.在setup函数中,通过ref对象的value属性,可以访问到值

3.在模版中,ref属性会自动解套,不需要额外的.value

const money  = ref(100)
const changeMoney = () => {
　　money.value = 0
}