前言

Vue.js通过双向数据绑定和虚拟DOM实现高效的数据更新和渲染，提供了响应式的数据绑定系统，使得开发者可以更直观地管理应用状态。它还拥有强大的指令系统（如v-bind、v-model等），便于在模板中进行数据操作和绑定。

Vue.js不仅适合构建单页应用（SPA），还可以与其他项目集成使用。其生态系统包括Vue Router、Vuex等库，满足复杂应用的需求。由于其学习曲线较低、文档完善，Vue.js成为许多开发者的首选前端框架之一。

在阅读这篇文章前欢迎大家可以看vue1.0版本的那篇文章，配合本篇文章一起食用效果更佳。

1.0简单复习

xml 复制代码

<template>
    <div>
        <ul>
            <li v-for="(item, index) in arr" key="index">{{ item }}</li>
            <button @click="handle">add</button>
            <button @click="reverse">reverse</button>
            <button @click="add">+1</button>
        </ul>
    </div>
</template>

我们先来简单的复习一下之前1.0所学到的内容，我们首先定义了一个列表，然后3个按钮，一个增加一个反转，一个加1.这里有一点不一样的是我们采用v-for的形式对数组进行遍历，创建了多个li结构。我们加上key会让运行更加流畅。

xml 复制代码

<script setup>
import { reactive } from 'vue'
const arr = reactive(['html', 'css', 'js', 'vue'])
const handle = () => {
    arr.push('node')
}
const reverse = () => {
    arr.reverse()
}
const add = () =>  {
    arr.forEach((elem, index) => {
        arr[index] = elem + '1'
    })
}
</script>

然后我们进行js编写，首先定义一个可以响应式的数组，然后分别定义了增加数据，反转数据以及加上字符串1的操作。

被我随便捣鼓一下之后就像上面这样子，你也可以试试！

v-model

它是一个vue里面的双响应式的结构，我们同样引入具体例子说明。

xml 复制代码

<div>
   <div>账号 ：<input type="text" v-model="state.username"></div>
   <div>密码 ：<input type="text" v-model="state.password"></div>
   <button @click="f">登录</button>
    </div>

我们的html部分也是比较简单，账号密码以及登录按钮，但是和之前不一样的地方是我们这里利用v-model把标签和js里面的内容实现了双向绑定。

javascript 复制代码

import {reactive} from 'vue'
const state = reactive({
    username: "",
    password: ""
})
const f = () => {
    state.username = '我是js到html的绑定说明'
    console.log(state);
}

这段代码是使用Vue 3的响应式函数reactive来创建一个包含username和password属性的状态对象state。这意味着当状态对象的属性发生变化时，相关的视图会自动更新。

在f函数中，我们通过修改state.username的值为'我是js到html的绑定说明'，然后打印整个state对象。由于state是响应式的，任何对其属性的修改都会触发相关视图的更新。

在Vue 3中，通过reactive函数创建的对象会被自动转换为响应式对象，从而实现了数据的双向绑定。这意味着当state.username的值改变时，与之相关联的视图也会相应地进行更新。这种响应式的特性是Vue框架在数据驱动视图方面的核心功能之一，能够帮助开发者更轻松地管理和更新应用的状态。

我们这里看我们首先定义了一个对象state然后里面存了两个空字符串，这就是我们利用v-model所绑定的数据，然后我们点击登录按钮时，可以打印用户名和密码，这是html到js的绑定，然后我们也可以在此时将用户名修改，这是我们js到html的绑定，因此称为双向绑定。

这是我们点击登录按钮之前的效果。

这是我们点击登录按钮之后的效果。

我为大家解释一下，首先如果我们不启用js-html的修改，最终打印的结果就是我们输入的用户名和密码，但是由于我们修改了用户名，因此最后打印的结果是修改之后的用户名和修改之前的密码。

watch

我们接下来带大家一起来做一个可以按温度提醒穿什么衣服的小demo

xml 复制代码

 <div>
        <h2>温度 {{ temp }}</h2>
        <h2>{{ suggest }}</h2>
        <button @click="add">+</button>
        <button @click="minus">-</button>
    </div>

首先我们的html部分也同样很简单，定义温度和所穿衣物，然后温度的增加和修改键。

ini 复制代码

import {ref, watch} from 'vue'
let temp = ref(20)
let suggest = ref('短袖')
const add = () => {
    temp.value++
}
const minus = () => {
    temp.value--
}
watch(temp, (newval, oldval) => {
    if(newval >=30){
        suggest.value = '短袖'
    } else if(newval >= 10) {
        suggest.value = '棉袄'
    } else {
        suggest.value = '羽绒服'
    }
})

watch函数接受两个参数：第一个是要监视的响应式数据temp，第二个是一个回调函数，当temp的值发生变化时，这个回调函数会被调用。
回调函数有两个参数：newval和oldval，分别表示temp的新值和旧值。
根据newval的值，回调函数会更新suggest.value：
- 如果新温度值大于等于30度，建议穿"短袖"。
- 如果新温度值在10到30度之间，建议穿"棉袄"。
- 如果新温度值小于10度，建议穿"羽绒服"。

重点在于我们的js部分，我们引入watch，它的具体作用是里面接收两个参数，第一个参数代表我们要监视的值，第二个回调函数里前一个参数代表改变后的值，后一个参数代表改变前的值，一旦监视的值发生改编，则回调函数的逻辑就会被执行。怎么样，用起来是不是很方便呢？

computed

我们最后来认识一下computed

javascript 复制代码

import {ref, computed} from 'vue'
let temp = ref(20)
// let suggest = ref('短袖')
const add = () => {
    temp.value++
}
const minus = () => {
    temp.value--
}

const suggest = computed(() => {
    if(temp.value >= 30){
        return '短袖'
    } else if (temp.value >= 20){
        return '夹克'
    } else {
        return '棉袄'
    }
})

响应式数据的创建：
- 使用 ref 函数创建响应式数据非常重要，因为它使得Vue能够跟踪数据的变化并自动更新视图。
函数的定义和调用：
- add 和 minus 函数修改 temp 的值，并且这些修改会被 Vue 自动检测到，从而触发相关的更新（比如重新计算 suggest 的值）。

computed函数创建了一个计算属性suggest，它会根据temp的值实时计算并返回对应的着装建议。
当temp的值发生变化时，suggest会自动重新计算并返回新的值。
- 如果temp的值大于或等于30度，返回'短袖'。
- 如果temp的值在20至29度之间，返回'夹克'。
- 如果temp的值小于20度，返回'棉袄'。

html内容一样，不一样的是我们的js部分，这个也很方便，我们甚至都不需要设置suggest的值，computed里最后返回最终值，因此我们只需要在其回调函数里进行温度的判断即可，只要里面判断的内容有了改变，函数体里的逻辑就会被执行。最后我们直接把返回的值交给suggest，不是非常方便嘛？

Vue入门2.0：零基础也能笑着变大神！

前言

1.0简单复习

v-model

watch

computed