vue3.0

1.项目搭建

1.尤大大推荐的vite
优点：快！
不需要打包，冷启动服务器
即时热模块更换
按需编译

缺点：安装插件的时候有时候会出现莫名其妙的报错...
提示：这里vue-router、vuex 都要自己安装，而且必须是4.0+

 npm init vite-app <project-name>
 cd <project-name>
 npm install
 npm run dev

2.传统的webpack
 vue create <project-name>
 vue add vue-next 
 cd <project-name>
 npm run serve

2.main.js
import vue from "vue" 变成了 createApp ,2.x使用 new Vue() 来创建实例，3.0则使用 createApp() 来创建

3.router.js
需要引入createRouter 来创建路由, createWebHashHistory 对应以前的 hash,createWebHistory 对应以前的 histtory

4.vuex
创建方式变成了 以 createStore 来创建

5.template模板

可以存在多个根节点
2.0
<template>
<div></div>
</template>

3.0
<template>
<div></div>
<div></div>
</template>

6.Composition API

这是vue3.0变化最大的地方，2.x 数据存放在data，方法在methods，通过this去调用
但是，在3.0这些都没有了，所有的代码全部都在 setup 里面实现，而且不会再有this
你页面需要哪些方法，就要在当前页引入

7.生命周期
我在网上找了张图 标记了一下2.0和3.0 一看就明白

具体使用

8.详细使用setup
setup有两个参数 props 和 context
props 顾名思义就是接受父组件传的值
context：由于3.0里面没有 this，所有就有了一个 context上下文属性，你可以通过这个属性去获取进行 一些 vue2.x 用this实现的操作

9.数据赋值
不同于vue2.x，直接在return里面 aa：123，3.0里面赋值只能通过ref 和 reactive 去声明一个响应式的值
无论是ref 还是reactive声明的值，还有后面会说到的函数方法，都要return出来，不然template里面会拿不到这个值，而且reurn必须放在最后，return后面的创建值和函数不会执行

• ref 用于声明基础数据类型
  创建一个响应式的基础类型，只能监听number、String、boolean等简单的类型，该属性一旦发生更改，都会被追踪到，js里面修改或者获取这个值的时候，要写成 count.value这种形式，但在template里面你可以直接写 {{count}}，不用去加.value

<template>
   <div>{{count}}</div>             
</template>
import {ref} from "vue"

setup(){
   const count =ref(0)
console.log(isRef(count)) //isRef 检查值是否是 ref创建的类型  ，需要引入import {ref，isRef} from "vue"
   count.value++    //必须要加.value
   return{
       count        //一定要return 出去
   }
}

• reactive 用于声明响应式数据对象
  在vue2.x里面，如果我们想修改一个对象里面的某个属性的时候，经常会遇到值更新了但是视图没更新，只能用$set 来强制更新，在3.0里面，我们可以使用reactive来创建一个响应式对象

<template>
   <div>{{count.name}}</div>             
</template>
import {reactive} from "vue"

setup(){
   const count =reactive({
      name:'369'
   })   count.name='857'
   return{
      count 
   }
}

其实这两个的区别就是：
声明值的时候，有人喜欢这样写： let count=5; let name=8;
有的人喜欢这样写： let obj={ name:8, value:10 }
所以就出现了这两种声明值的方法

toRefs 把一个响应式对象转成成普通 ref
这个属性我是这样理解的，当我们创建了一个reactive对象的时候，我们如果只想要其中的部 分属性，觉得在模板里面 {{count.name}}，{{count.value}} 太繁琐，我们可以使用这个属性，在return 里面 ...toRefs(count),解构对象,将里面的属性转换成ref，而不丢失响应式

10.ref节点
在vue2.x里面我们获取节点使用 this.$refs.xxx来获取这个节点，在3.0里面我们要用这样获取

<template>
  <div ref="test"></div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    // 定义一个 null 的 ref，名字与上面定义的 ref 一样，就可以拿到 refs 节点
    const test = ref(null);

    return {
      test // 一定要 return 出去
    };
  }
};
</script>

后面整理了其他的改动在继续更新