Vue3基础、响应式数据

Vue3支持vue2的大多数特性，更好的支持Typescript

性能提升：

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

• 重写虚拟DOM的实现和Tree-Shaking

vue3当中可以没有根标签，vue2必须要有一个根标签 

在vue3当中可以完全使用vue的配置项写法（只是有些许的改变）

vue3中推荐的不再是配置项写法，而是组合API的写法

setup

这个setup是我们组合api写法的入口

本质其实是两个生命周期钩子的合并  beforeCreate  created

在setup当中无法使用this

setup函数最终return一个对象，对象里面所有的属性供模板使用

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name:'About',
   data(){
     return {}
   },
   methods:{

   },
   computed:{
   }

   setup(){
     let msg = '我爱你赵丽颖'  //这样的数据不是响应式数据，因为定义变量直接赋值根本没做响应式处理
     const update = () => {
       msg = '我爱你杨幂'
     }
     return {
       msg,
       update
     }
   }
})

 setup是有一个语法糖，需要重新写一个script标签

下面这个script标签内部就是setup函数内部的逻辑

在下面这个script当中所有定义的变量、引入的所有模块、定义的函数等等都会默认return

后期我们都是两个script标签，上面是之前我们配置对象，上面的配置对象主要是用来给组件起名称

<script lang="ts" setup>
  let msg = '我爱你赵丽颖'
  function update(){
    console.log(111);
    msg = '我爱你杨幂'
  }
</script>

响应式数据

ref 

ref函数可以把数据创建成为ref对象，只要是ref对象，那么就一定是响应式

ref创建单个值的响应式对象

ref对象，在模板用的时候会自动拿value，不需要你去.value

ref对象，在js当中修改的时候，需要.value

reactive 

reactive是用来对一个对象创建代理对象，代理对象也是响应式的

reactive创建的代理对象，直接通过.语法去操作，不需要.value

不能传递非对象数据