【Vue3】初始化和Composition API（组合式）

创建Vue3.0工程

查看自己的vue/cli版本，使用Vue/cli创建

• cmd,vue -V,要在4.5.0版本以上
• vue create 项目名
• 创建Vue3项目

使用vite创建

• 新一代前端构建工具
• 开发环境下，无需打包，可快速冷启动
• 轻量快速的热重载（HMR）
• 真正的按需编译

开始创建

• npm init vite-app 项目名
• cd 项目名
• npm i
• npm run dev

查看Vue3.0工程

vue.config.js中，关闭语法检查，

• 防止编译器报错，调试麻烦，记得重启

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false//关闭语法检查
})

main.js讲解

• vue2中

// vue2中，借助render，传入h，h就是外壳app
new Vue({
    render: (h) => h(App)
}).$mount('#app')

• vue3中，通过引用createApp,无需通过new，可以直接调用

import { createApp } from 'vue'
import App from './App.vue'

• 创建应用实例对象

const app = createApp(App)

• 挂载

app.mount("#app")

• 卸载

app.unmount("#app")

app.vue讲解

VUE3组件中的模板结构可以没有根标签
VUE2中没有会报错

常用的Composition API（组合式）

1.拉开序幕的setup

• vue3,中的新的配置项。值是一个函数
• 在vue3中，组件中所用到的数据，方法等，均要配置在setup中
• 在vue2中，配置数据在data,配置方法在methods，
• setup两种返回值
• 1，若返回一个对象，则对象中的属性，方法在模板中均可直接使用
• 2，若返回一个渲染函数，则自定义渲染内容

返回对象

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <h1>我是{{name}},我{{age}}</h1>
  <button @click="sayword">点我</button>
</template>

<script>
export default {
  name: 'App',
  setup(){
    let name ="乞力马扎罗"
    let age =18
    function sayword(){
      console.log(`你好${name},我${age}`)
    }
    return{
      name,
      age,
      sayword
    }
  },
}
</script>

<style>

</style>

返回渲染函数

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <h1>我是{{name}},我{{age}}</h1>
  <button @click="sayword">点我</button>
</template>
<script>
import {h} from "vue"
export default {
  name: 'App',
  setup(){
    let name ="乞力马扎罗"
    let age =18
    function sayword(){
      console.log(`你好${name},我${age}`)
    }
    return ()=>h('button','看我强制替换你')
  },
}
</script>

<style>

</style>

注意事项，

• vue2和vue3可以混合用，但不介意，vue2中调用setup中数据可以，但vue3的setup调用vue2会报错
• 如果重名，setup优先
• setup不能是async函数

2，ref函数

• ref不是属性，得import引入
• 在模板里面使用不用.value,当发现是ref对象的时候，自动.value了
• 创建了一个包含响应式的引用对象（简称ref对象）
• 修改变量的时候，是通过.value
• 修改对象的时候， vue3中，把Proxy封装到了ractive函数

import {ref} from "vue"

• 先打印一下经过ref后的值，长什么样子！

 setup() {
    let name =ref("乞力马扎罗"); 
    let age = ref(18);
    function sayword() {
      console.log(name,age);
    }
    return {
      name,
      age,
      sayword,
    };
  },

1，他的实例是RefImpl

• 代表reference（引用） implement（实现）
• 也叫引用实现的实例，叫引用对象

2，向里一层，看value

• set和get被放在原型里面
  

3，所以，修改变量得用.value

 setup() {
    let name =ref("乞力马扎罗"); 
    let age = ref(18);
    function sayword() {
      name.value="罗曼蒂克"
      age.value=42
      console.log(name,age);
    }
    return {
      name,
      age,
      sayword,
    };
  },

4，修改对象的时候

• object本身是reflmpl，把传入的对象变成了Proxy的代理对象
• 修改的时候，一个value即可更新里面所有的，不用两个value

<template>
  <h1>我是{{ name }},我{{ age }}</h1>
  <h1>我是{{ job.type }},我{{ job.salus}}</h1>

  <button @click="sayword">点我更新信息</button>
</template>

<script>
import {ref} from "vue"
export default {
  name: "App",
  setup() {
    let name =ref("乞力马扎罗"); 
    let age = ref(18);
    let job = ref({
      type:"前端",
      salus:"30k"
    });
    function sayword() {
      name.value="罗曼蒂克"
      age.value=42
      job.value.type="后端"
      console.log(name,age);
    }
    return {
      name,
      age,
      job,
      sayword,
    };
  },
};
</script>

<style>
</style>

3，reactive函数

• 通过这个对象就不用.value更新了
• 作用，定义一个对象类型的响应式数据，（基本类似采用ref）
• 语法，const 代理对象 = reactive（源对象），接收一个对象或者数组，返回一个代理对象（Proxy对象）
• reactive定义的响应式数据是“深层次”的
• 内部其实是基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

<script>
import {reactive, ref} from "vue"
export default {
  name: "App",
  setup() {
    let name =ref("乞力马扎罗"); 
    let age = ref(18);
    let job = reactive({
      type:"前端",
      salus:"30k"
    });
    function sayword() {
      name.value="罗曼蒂克"
      age.value=42
      job.type="后端"
    }
    return {
      name,
      age,
      job,
      sayword,
    };
  },
};
</script>

修改数组

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <h1>我是{{ name }},我{{ age }}</h1>
  <h1>我是{{ job.type }},我{{ job.salus}}</h1>
  <h1>我是{{ list[0] }}</h1>
  <button @click="sayword">点我更新信息</button>
</template>

<script>
import {reactive, ref} from "vue"
export default {
  name: "App",
  setup() {
    let name =ref("乞力马扎罗"); 
    let age = ref(18);
    let job = reactive({
      type:"前端",
      salus:"30k"
    });
    let list = reactive([1,2,3]);
    function sayword() {
      name.value="罗曼蒂克"
      age.value=42
      list[0]=4
      job.type="后端"
    }
    return {
      name,
      age,
      job,
      list,
      sayword,
    };
  },
};
</script>

<style>
</style>

优化后的reactive

<template>
  <h1>我是{{ person.name }},我{{ person.age }}</h1>
  <h1>我是{{ person.job.type }},我{{ person.job.salus }}</h1>
  <h1>我是{{ person.list[0] }}</h1>
  <button @click="sayword">点我更新信息</button>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "乞力马扎罗",
      age: 18,
      job: {
        type: "前端",
        salus: "30k",
      },
      list: [9],
    });
    function sayword() {
      console.log(person)
      person.name='罗曼蒂克'
      person.list[0]='罗曼蒂克'
    }
    return {
      person,
      sayword,
    };
  },
};
</script>

<style>

</style>

4，reactive对比ref

从定义的角度

• ref用来定义 基本数据类型
• reactive用来定义，对象（或数组）类型数据
• 当然，ref也可以定义对象或者数据类型，但他内部会自动通过reactive转为代理对象

从原理角度：

• ref通过Object。defineProperty（）的get和set来实现响应式（数据劫持）
• reactive通过使用es6里的Proxy来实现响应式（数据劫持），并通过reflect操作源对象内部的数据

从使用的角度

• ref定义的数据，操作数据需要.value,读取数据时模板中直接读取，不需要.value
• reactive定义的数据，操作数据与读取数据，均不需要.value