今天开始学vue3啦~~主要是写一些新增和与vue2的差别。后面会专门出一篇vue2和3的一些对比

vue3

创建工程：

1. vue-cli

2. 用vite创建

常用Composition API（组合式API）

---

新增：setup —— 是一个配置项（函数格式）

1. 组件中用到的所有数据、方法、计算属性、监视属性、生命周期钩子都要写在setup里

   setup() {
   //这里面的数据并不是响应式的，只是先练习一下setup的使用
   ​    *let* name = 'zs'
   ​    *let* age = 18
   
   ​    *function* sayhello() {
   ​      alert(`我叫${name},今年${age}`)
   ​    }
   
   ​    return {
   ​      name,
   ​      age,
   ​      sayhello
   ​    }
   
     }
   

2. setup函数的两种返回值:
   1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
   2.若返回一个渲染函数:则可以自定义渲染内容。(了解)渲染函数就是我们当时在vue2写模板的时候里面用的render里的creatElement。要引入一下，从vue里面引入{h}

3. 注意点:

   1. 尽量不要与vue2.x配置混用
   • Vue2.x配置(data、methos、computed…）中可以访问到setup中的属性、方法。
   • 但在setup中不能访问到Vue2.x配置(data、methos、computed…) 。
   • 如果有重名, setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

vue2是在对象里面写属性和方法，就是key-value形式。

vue3是在函数里写属性和方法，所以要用变量写，函数前面要写function

ref函数 —— 定义一个响应式的数据

使用：要从vue里面引入 import {ref} from ‘vue’

setup() {

​    *let* name = ref('zs')
​    *let* age = ref(18)

​    *const* job = ref({
​      type: '前端工程师',
​      salary: '18k'
​    })

​    *function* changeInfo() {
​      name.value = 'bigzs'
​      age.value = 38
​      job.value.type = 'UI'//这要.value,后面不通过引用对象，不用再.value取了
​    }

​    return {
​      name,
​      age,
​      job,
​      changeInfo
​    }

  }

语法: const xxx = ref(initvalue) (用const命名是因为，要修改的是对象里的属性，对象地址不变，这样修改是不会报错的)

• 创建一个包含响应式数据的引用对象(reference对象)。

• JS中操作数据:xxx.value

• 模板中读取数据:不需要.value，直接:

  { {xx] j

  接收的数据可以是:基本类型、也可以是对象类型。
  基本类型的数据:响应式依然是靠 object.defineProperty()的get与set 完成的。

  对象类型的数据:内部“求助”了Vue3.0中的一个新函数-reactive函数。（Proxy封装成的）

reactive函数——定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数)

 *const* job = reactive({
​      type: '前端工程师'
​      salary: '18k'，
		a