【Vue】Vue3中新增的特性

目录

一、组合式API：setup

二、初始化函数：ref

三、构建响应式数据方法：reactive

四、Vue3的计算属性

五、Vue3的setup语法糖

---

一、组合式API：setup

1.是一个函数,可以返回对象,对象的属性和方法可以在模板中直接使用。

2.所有的组合API函数都在此使用, 只在初始化时执行一次。

二、初始化函数：ref

作用是初始化组件中使用的变量。

语法是：const 变量名 = ref(初始值)

Demo.vue代码段(前提：用使用Vite构建工具构建的Vue项目)：

​
<template>
<div id="d1">{{ info }}</div>
  <div>{{ count }}</div>
  <button type="button" @click="add">Add</button>
</template>
<script>
//导入reactive, ref
import {reactive, ref} from 'vue';
export default {
  name: "Demo",
  setup(){
    const count = ref(0)
    const info = ref('早睡早起长头发')

    function add(){
      count.value = count.value + 1
    }
    return{
      info,
      count,
      obj,
      add
    }
  }
}
</script>

<style scoped>
 #d1{
  color:red;
  font-size:25px;
}
</style>

App.vue代码段：

<script setup>
import Demo from './components/Demo.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Demo/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、构建响应式数据方法：reactive

作用是将数据打包成对象。

 Demo.vue代码段(前提：用使用Vite构建工具构建的Vue项目)： 

<template>
<div id="d1">{{ info }}</div>
  <div>{{ count }}</div>
  <h2>姓名：{{ obj.name }}</h2>
  <h2>性别：{{ obj.gender }}</h2>
  <h2>年龄：{{ obj.age }}</h2>
  <h2>家属：{{ obj.wife }}</h2>
  <button type="button" @click="add">Add</button>
</template>

<script>
//导入reactive, ref
import {reactive, ref} from 'vue';
export default {
  name: "Demo",
  setup(){
    const count = ref(0)
    const info = ref('早睡早起长头发')
    const obj = reactive({
      name: '刘备',
      gender: '男',
      age: 36,
      wife: {
        name: '栾夫人',
        age: 23
      }
    })

    function add(){
      count.value = count.value + 1
    }
    return{
      info,
      count,
      obj,
      add
    }
  }
}
</script>

<style scoped>
 #d1{
  color:red;
  font-size:25px;
}
</style>

App.vue代码段：

<script setup>
import Demo from './components/Demo.vue';
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Demo/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

四、Vue3的计算属性

计算属性：computed

监视属性：wath

Com.vue代码段(前提：用使用Vite构建工具构建的Vue项目)：

<template>
  <br>
  fistName: <input v-model="user.firstName"/>
  <br><br>
  lastName: <input v-model="user.lastName"/>
  <br><br>
  fullName1: <input v-model="fullName1"/>
  <br><br>
  fullName2: <input v-model="fullName2">
  <br><br>
  fullName3: <input v-model="fullName3"><br>
</template>

<script>
import { ref,reactive,computed,watch} from "vue";

export default {
  name: "Com",
  setup(){
    const user = reactive({
      firstName:'A',
      lastName:'B'
    })
    // 只有get方法的计算属性
    const fullName1 = computed(()=>{
      return user.firstName + '--'+ user.lastName
    })

    //含有set/get方法的计算属性
    const fullName2 = computed({
      get(){
        return user.firstName + '#' + user.lastName
      },
      set(value){
        const names = value.split('#')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })

    //定义监视器，监控user的变化
    const fullName3 = ref('')

    watch(user,()=>{
         fullName3.value = user.firstName + '-' + user.lastName
    },{
      immediate: true,
      deep: true
    })

    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
}
</script>

<style scoped>

</style>

App.vue代码段：

<script setup>
import Com from './components/Demo.vue';
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Com/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

五、Vue3的setup语法糖

不需要使用exports default进行组件的默认导出

<script setup>

</script>