Vue3入门-声明式渲染+数据响应式

Yui_

发布于 2025-07-15 14:52:58

14000

代码可运行

文章被收录于专栏：Yui编程知识Yui编程知识

运行总次数：0

代码可运行

🏠个人主页：Yui_ 🍑操作环境：Windows 🚀所属专栏：Vue3

1. 声明式渲染

1.1 Vue的Hello World程序

在实现Hello World程序前，我们必须先引入VueJs。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>

写一个单标签作为容器进行演示：

 <div id="app"></div>

创建应用

<script>
	//创建Vue应用
	Vue.createApp({
		//入口函数
		setup() {
			//数据准备
			const msg = 'Hello World'
			//返回数据对象
			return{
				msg
			}
		}
	}).mount('#app') //内容渲染到id == app 的盒子里
</script>

渲染数据

<div id="app">
	<h1>{{ msg }}</h1>
	<!-- 渲染数据 -->
</div>

1.2 setup函数

setup函数是Vue3API的入口函数

setup函数是Vue3的特有选项，作为编写代码的起点。
标签中用到的数据或者函数，需要在setup中声明并返回。
函数中的this不是Vue的实例，setup中是不会用到this的

1.3 插值表达式

{{ 表达式 }}被称为插值表达式前端中常见的表达式有：

所有字面量
对象.属性名
算术运算或三元运算
方法的调用演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <p>我的名字为{{Stu.name}}我今年{{Stu.age}}岁了</p>
        <p>是{{ Stu.age >= 18 ?'成年人':'未成年人'}}哦</p>
        <p>明年就{{ Stu.age+1 }}岁了</p>
        <p>fn的返回值{{ fn() }}</p>
        <!-- 渲染数据 -->
    </div>
</body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
    <script>
        //创建Vue应用
        Vue.createApp({
            //入口函数
            setup() {
                //数据准备
                const msg = 'Hello World' //字符串

                const Stu = {
                    name:'Yui',
                    age:17
                } // 对象
                function fn(){
                    return 520
                }//函数
                //返回数据对象
                return{
                    msg,
                    Stu,
                    fn
                }
            }
        }).mount('#app') //内容渲染到id == app 的盒子里
    </script>
</html>

2. 数据响应式

数据响应式就是数据变，界面自动变，无需手动操作 DOM。

2.1 安装Vue开发者工具

有两种方法：

通过谷歌应用商店安装（你懂的）
极简插件下载 https://chrome.zzzmh.cn/index

安装成功后，打开开发者工具后，你会看到一个Vue调试板

3. 响应式函数reactive

在先前的样例中，setup中默认返回的数据是不具备响应式特性的。

3.1 如何使用

从Vue中解构出reactive函数
在setup函数中使用reactive函数，并传入一个普通对象，返回一个响应式对象
在最后setup函数中返回一个响应式对象。
reactive接收的参数是对象。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>我的名字为{{Stu.name}}我今年{{Stu.age}}岁了</p>
        <!-- 渲染数据 -->
    </div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
<script>
    const {reactive} = Vue
    //创建Vue应用
    Vue.createApp({
        //入口函数
        setup() {
            const Stu = reactive({
                name: 'Yui',
                age: 17
            } )// 对象
            return {
                Stu
            }
        }
    }).mount('#app') //内容渲染到id == app 的盒子里
</script>

</html>

注意： reactive函数的参数只能是对象

4. 响应式函数ref

ref的作用和reactive类似，但是参数不限制类型。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>我的名字为{{Stu.name}}我今年{{Stu.age}}岁了</p>
        <h1>{{ msg }}</h1>
        <!-- 渲染数据 -->
    </div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
<script>
    const {reactive,ref} = Vue
    //创建Vue应用
    Vue.createApp({
        //入口函数
        setup() {
            const Stu = reactive({
                name: 'Yui',
                age: 17
            } )// 对象

            const msg = ref("Hello World")
            return {
                Stu,
                msg
            }
        }
    }).mount('#app') //内容渲染到id == app 的盒子里
</script>

</html>

注意：操作ref创建的数据，JS中需要.value，template中不用。