Vue3

鹏重名了
149 阅读4分钟

vue3

setup

  • 在 Vue3 中，setup 是一个 Composition API 的核心功能，用来处理组件逻辑，完全基于JavaScript编程，无需特定的 Vue 知识即可快速上手。
  • Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。
  • 但在setup中不能访问到Vue2的配置（data、methos......）。
  • 如果与Vue2冲突，则setup优先。
  • vscode终端执行 npm i vite-plugin-vue-setup-extend -D安装插件，然后在vite.config.ts中引入import vueSetupExtend from 'vite-plugin-vue-setup-extend'并调用。
<template> 
    <Preson />
</template>

<script lang="ts">
import Preson from './components/Preson.vue';
export default {
    name: 'App',//组件名
    components: { Preson } //注册组件
}
</script>

<template>
   <div class="person">
       <h2>姓名：{{ name }}</h2>
       <h2>年龄：{{ age }}</h2>
       <button @click="changeName">修改名字</button>
       <button @click="changeAge">修改年龄</button>
       <button @click="showTel">查看联系方式</button>
   </div>
</template>



<script lang="ts" setup name="Preson">
//console.log(this)//setup函数中的this是undefined,Vue3中已经弱化this了
//数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
let name = '张三s'
let age = 18
let tel = '13888888888'

function changeName() {
   name = 'abc'//注意:这样修改name，页面是没有变化的
   console.log(name)//name确实改了，但name不是响应式的
}
function changeAge() {//同name
   age += 1
}
function showTel() {
   alert(tel)
}

</script>

<style scoped>
.person {
   background-color: #addd;
   box-shadow: 0 0 10px;
   border-radius: 10px;
   padding: 20px;
}

button {
   margin: 0 5px;
}
</style>

ref创建：基本类型的响应式数据

  • 作用： 定义响应式变量。
  • 语法： let xxx = ref(初始值)。
  • 返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
  • 注意点：
    • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。
<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>



<script lang="ts" setup name="Preson">
import { ref } from 'vue'

//console.log(this)//setup函数中的this是undefined,Vue3中已经弱化this了
//数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
let name = ref('张三ssss')
let age =  ref(18)
let tel = '13888888888'

function changeName() {
    name.value = 'abc'//注意:这样修改name，页面是没有变化的
    console.log(name.value)//name确实改了，但name不是响应式的
}
function changeAge() {//同name
    age.value += 1
}
function showTel() {
    alert(tel)
}

</script>
 
<style scoped>
.person {
    background-color: #addd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>

reactive创建：对象类型的响应式数据

  • 作用： 定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
  • 语法： let 响应式对象= reactive(源对象)。
  • 返回值： 一个Proxy的实例对象，简称：响应式对象。
  • 注意点： reactive定义的响应式数据是“深层次”的。
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

ref 创建：对象类型的响应式数据

  • 其实ref接收的数据可以是：基本类型、对象类型。
  • 若ref接收的是对象类型，内部其实也是调用了reactive函数。
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>

ref 对比 reactive 包含插件

宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；
  2. reactive用来定义：对象类型数据。
  • 区别：
  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
  2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
  • 使用原则：
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。
  • Vue - Official --> 设置-->勾选 1736905115853.jpg

toRefs 与 toRef

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>
avatar
文章
阅读
粉丝