Vue

2026-04-25 2320 words 5 minutes

Contents

Vue3

main.ts: 项目入口文件 index.hmtl,通过标签引入文件main.ts，开启整个工程。打开 index.hmtl、main.ts参看具体内容：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

App.vue: 一般包含三段，template、script和style

<template>
  <div class="app">helllo world!  </div>
</template>

<script lang="ts">
export default{
  name:'App'
}
</script>

<style lang="css">
.app{
  background-color: #ccc;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding:  10px;
}
</style>

1、setup使用

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <h2>价格:{{ price }}万</h2>
    <button @click="changeName">修改品牌</button>
    <button @click="changePrice">修改价格</button>
    <button @click="showLowPrice">查看低价</button>

  </div>
</template>
<script lang="ts">
export default{
  name: 'Car',
  setup() {
    console.log(this)
    let name = '奔驰';
    let price = 100;
    let lowPrice = 80;
    function changeName() {
      name = '宝马'
      console.log(name)

    }
    function changePrice() {
      price += 10;
      console.log(price)

    }
    function showLowPrice() {
      alert(lowPrice);
    }
    return { name, price, changeName, changePrice, showLowPrice }
  }
}
</script>

创建一个最简setup函数

<template>
  <div class="car">
    <h2>品牌:{{ name }}</h2>
    <button @click="changeName">修改品牌</button>
  </div>
</template>
<script setup lang="ts">
let name = '奔驰';
function changeName() {
  name = '宝马'
}
</script>

2、响应式数据

ref给基本数据标记成响应式数据，如整数、浮点数、字符串
reactive给对象标记成响应式数据，如对象、数组
ref也可给对象标记响应式数据，但底层用reactive实现

用ref给基本数据标记成响应式对象

从vue引入ref，才可以使用ref函数
定义响应式变量，用ref赋值
获取、改变响应式数据变量的值，不能直接访问，需要加.value
模版中可直接引用变量

<template>
  <h1>鱼类：{{ fish }}</h1>
  <h2>价格：{{price  }}</h2>
  <button @click="changeName">改变鱼</button>
  <button @click="addPrice">涨价</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let fish = ref('鲫鱼');
let price =ref(10);
function changeName() {
  fish.value = '草鱼';
  console.log(fish);
  console.log(fish.value);

}
function addPrice() {
  price.value += 10;
  console.log(price)
  console.log(price.value)

}
</script>

reactive定义对象类型的响应式数据

从vue引入reactive
定义响应式对象，用reactive包裹对象
访问、改变响应式对象，直接操作成员变量
模版直接使用响应式对象分别定义两个响应式数据，一是用对象定义的响应式，一是用数组定义的响应式，来说明响应式对象如何使用。

template>
  <h2>鱼类：{{ fish.name }}</h2>
  <h2>价格：{{fish.price  }}</h2>
  <button @click="changeName">改变鱼</button>
  <button @click="addPrice">涨价</button>
  <h2>鱼的列表</h2>
  <ul>
    <li v-for="item in fishs" :key="item.id">
      {{ item.name }}:{{ item.price }}
    </li>
  </ul>
  <button @click="changeThreePrice">改变第三条鱼的价格</button>

</template>
<script setup>
import { reactive } from 'vue'
let fish = reactive({ name: '鲫鱼', price: 10 });
let fishs = reactive([
  {id:'txdi01',name:'鲫鱼',price:10},
  {id:'txdi02',name:'鲤鱼',price:20},
  {id:'txdi03',name:'草鱼',price:30},
])
function changeName() {
  fish.name = '草鱼';
  console.log(fish);
  console.log(fish.name);

}
function addPrice() {
  fish.price += 10;

}
function changeThreePrice() {
  fishs[1].price += 10;
}
</script>

<template>
  <h2>鱼类：{{ a.b.c.color }}</h2>
  <button @click="changeC">深度改变</button>
</template>
<script setup>
import { reactive } from 'vue'
let a = reactive({
  b: {
    c: {
      color: 'red'
    }
  }
})
a.b.c.color='black'
function changeC() {
  a.b.c.color = 'black';
}
</script>

ref与reactive的区别

ref定义基础类型数据
reactive定义对象数据
但ref也可以定义对象类型的数据。但底层基于reactive实现 ref定义对象类型数据，底层用reactive实现.

3、watch

watch本意是监视、观察。它的功能就是监视数据的变化。数据一旦变化，就会产生两种数据：新数据、旧数据。如业务场景中，当订单量大多某个数时，就发放优惠卷。watch非常重要，掌握好响应式数据、computed、watch，vue写功能不会有太大问题。在vue官网明确表达，watch可以监视以下四种数据：

ref定义的数据
reactive定义的数据
函数返回一个值（getter函数）
包含上诉三种值的数组
创建组件Fish
引入ref、watch
创建响应式数据name、price
watch函数监视price变化
当price超过10，watch停止监视price变化

<template>
  <h2>鱼类：{{ name }}</h2>
  <h2>价格：{{ price }}</h2>
  <button @click="addPrice()">增加价格</button>
</template>
<script setup>
import { ref, watch } from 'vue'
let name = ref('鲫鱼');
let price = ref(5);
function addPrice() {
  price.value += 1;
}
let stopWatchPrice = watch(price, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  if (newValue > 10) {
    console.log(stopWatchPrice);
    stopWatchPrice.stop();
  }
})
</script>

ref()

ref()接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的

function ref<T>(value: T): Ref<UnwrapRef<T>>
interface Ref<T> {
  value: T
}

使用

import { ref } from 'vue'

const initCode = ref<string | number>('200')

interface User {
  name: string
  age: string | number
}

const user = ref<User>({
  name:'前端开发爱好者',
  age: 20
})



import { ref } from 'vue'
import type { Ref } from 'vue'

const initCode: Ref<string | number> = ref('200')