vue3使用体验--用了之后再也不想用vue2

0.个人推荐使用 setup 语法糖，看起来更加简洁。

<script setup>

import { ref,reactive,onMounted } from 'vue';

const name=ref('李四')；   // 定义普通数据类型的响应式，获取/修改数据需要 .value，在模板中不需要 .value , 可以直接使用

onMounted (()=>{
  //某些业务逻辑。

  cosole.log(name.value)     

})

</script>

如果不习惯没有this，可以换回类vue2的生命周期方式。

 

1.在使用引入公共css文件，区别如下。

vue3 vite构建

<style src="../assets/css/public.css" scoped></style>

 

vue2.x  webpack构建

<style scoped>

  /* @import '../assets/css/public.css'; */

</style>

 

 

2.关于数据响应式。

必须使用ref 或者reactive去定义。reactive定义是 引用数据类型。ref定义的是基础的数据类型，当然也可以接受引用数据类型，其实是交由reactive处理。

 

3.关于toRef和toRefs。

两者的作用都是解构响应的数据，区别是前者在template中使用的时候不需要 .value, toRefs结构的是引用数据类型。