行者无疆

VUE3快速入门（11）——路由的嵌套与传参

Wed, 19 Mar 2025 12:17:58 +0800

1. 嵌套路由

1.1 什么是嵌套路由

嵌套路由是指一个路由视图中又包含一个路由视图，通常用于多级分类的SPA。比如一个新闻SPA，分为板块与列表二级。单击不同的板块出现不同的文章列表，再点击列表则出现新闻正文。本文基于上一节内容增加新闻列表和新闻详情的展示功能。

1.2 创建显示新闻详情的视图组件

在“@/views/”路径下，新增一个Content.vue组件，HTML部分如下：

<template>
    <div id="detail">
        <h2>新闻标题</h2>
        <p>这是新闻的具体内容</p>
    </div>
</template>

1.2 定义新闻数据

修改上一节的News.vue代码的ts部分，增加新闻数据：

<script lang="ts" name="News" setup>
    import { ref } from 'vue';
    const news_data = ref([
        {
            id: 1,
            title: '新闻1',
            content: '新闻内容1'
        },
        {
            id: 2,
            title: '新闻2',
            content: '新闻内容2'
        },
        {
            id: 3,
            title: '新闻3',
            content: '新闻内容3'
        },
        {
            id: 4,
            title: '新闻4',
            content: '新闻内容4'
        }
    ]);
</script>

1.3 新增子路由定义

在路由定义文件的新闻路径下增加一个子路由：

import Content from '@/views/Content.vue'//新增引入
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        //...
        {
        name: 'news',
        path: '/news',
        component: News,
        //增加children属性，注意为数组
        children: [
            {
                name: 'content',
                path: 'content',//注意：子路由无需再用“/”
                component: Content,
            }],
        },
        //...
    ],
})

1.4 修改新闻列表视图

修改News.vue的HTML部分如下：

<template>
    <h1>新闻列表</h1>
    <div id="warpper">
        <!-- 左侧新闻列表 --->
        <div id="list">
            <ul>
                <li v-for="item in news_data" :key="item.id">
                    <p><RouterLink :to='{path: "/news/content"}'>{{ item.title }}</RouterLink></p>
                </li>
            </ul>
        </div>
        <!-- 右侧新闻内容 -->
        <div id="content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

注意二级路由的写法。

修改完成后，可以在新闻导航内看到左侧的新闻列表，点击链接在右侧展示的新闻内容。

2. 路由传参

上述代码中点击每个新闻链接展示的内容都一样，现在需要根据链接展示不同的新闻，该功能需要用路由传参来实现。

2.1 Query传参

路由定义文件见前文。

2.1.1 直接字符串拼接（不推荐）

修改New.vue的RouterLink组件调用代码：

<p>
    <RouterLink :to='`/news/content?title=${ item.title }&content=${ item.content }`'>{{ item.title }}</RouterLink>
</p>

注意VUE的字符串模板语法：`…${变量名1}…${变量名2}…`。
修改Content.vue的代码，取参数：
ts部分：

import { useRoute } from 'vue-router'//引入useRoute
import { toRefs } from 'vue'//响应式
const route = useRoute()
const { query } = toRefs(route)//从useRoute中解构query属性，该属性保存了传递的参数。

html部分：

<template>
    <div id="detail">
        <!-- 从query属性获取title参数-->
        <h2>{{ query.title }}</h2>
        <!-- 从query属性获取content参数-->
        <p>{{ query.content }}</p>
    </div>
</template>

注意：由于是直接把传递的参数进行动态显示，所以在解构时需要转换为响应式类型。或者不解构，则写法为：

<h2>{{ route.query.title }}</h2>
<p>{{ route.query.content }}</p>

2.1.2 通过RouterLink组件“to”属性的对象写法

<RouterLink :to=
    "{
        //注意路径
        path: '/news/content',
        //通过query属性传递
        query: {
            title: item.title,
            content: item.content
    }}">{{ item.title }}</RouterLink>

2.2 Params传参

首先修改路由定义：

children: [
    {
        name: 'content',//在Params传参模式下，必须定义name属性
        path: 'content/:title/:content',//注意此处的占位符写法
        component: Content,
    },
],

再修改接收的代码。ts部分：

import { useRoute } from 'vue-router'
import { toRefs } from 'vue'
const route = useRoute()
const { params } = toRefs(route)//从route对象解构params属性并处理响应式

html部分：

<template>
    <div id="detail">
        <!-- 从query属性获取title参数-->
        <h2>{{ params.title }}</h2>
        <!-- 从query属性获取content参数-->
        <p>{{ params.content }}</p>
    </div>
</template>

2.2.1 直接字符串拼接（不推荐）

修改New.vue的RouterLink组件调用代码：

<p><RouterLink :to='`/news/content/${ item.title }/${ item.content }`'>{{ item.title }}</RouterLink></p>

2.2.2 通过RouterLink组件“to”属性的对象写法

<RouterLink :to="{
    name: 'content',//这里必须用name属性
    params: {//指定params
        title: item.title,
        content: item.content
    }
}">{{ item.title }}

2.3 Props传参

Props传参可以让参数的接收变得更加简化，相当于普通组件的参数接收。先修改路由视图组件，ts部分：

defineProps(['title', 'content'])//定义两个属性

html部分：

<template>
    <div id="detail">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
</template>

显然，跟普通组件的属性定义写法一模一样。
Props传参又分为布尔值、函数式、对象式三种写法。

2.3.1 布尔值写法

布尔值写法用于将所有params方式传递的参数传递到路由视图组件。
修改路由定义文件：

//@/router/index.js
children: [
    {
        name: 'content',
        path: 'content/:title/:content',
        component: Content,
        props: true//启用props
    },
],

2.3.2 函数式写法

函数式写法用于传递部分参数，该写法需要自己定义一个名为props的函数，该函数具有一个参数，用于传递route对象，代码如下：

children: [
    {
        name: 'content',
        path: 'content/:title/:content',
        component: Content,
        props(r){//参数r的类型为route对象
            return r.params//将所有参数全部传过去，实际上采用布尔型写法更简便
            //或返回部分参数：
            //return r.params.content
        }
    },
],

由于函数式写法可以操作route对象，所以可以根据实际情况传递需要使用的一部分参数，而不是一定是所有。如果为传递所有参数，则用布尔值写法更简便。

2.3.3 对象式写法

直接传递对象，用处不大：

children: [
    {
        name: 'content',
        path: 'content/:title/:content',
        component: Content,
        props: {
            title: 'xxx',
            content: 'xxx'
        }
    },
],

3. 编程式控制

如果需要高级功能，如自动跳转、自定义路由标签（将RouterLink替换为button标签）、权限检查等，就必须自己实现RouterLink的功能，常见于后端系统。
修改代码，将原本的RouterLink去掉，改为单击按钮查看新闻，同时将新闻标题用普通标签展示。
html部分:

<ul>
    <li v-for="item in news_data" :key="item.id">
        <p>
            <button @click="showContent(item)">查看</button>
            <span>{{ item.title }}</span>
        </p>
    </li>
</ul>

ts部分：

import { useRouter } from 'vue-router';//注意此处引用的是useRouter
//ts为强类型语言，定义新闻对象类型
interface news_data_type {
        id: number;
        title: string;
        content: string;
}
//实现showContent方法，传递新闻对象类型参数
function showContent(data: news_data_type) {
    router.push(
    {
        name: 'content',
        params: {
            title: data.title,
            content: data.content
        }
    });
}

Router对象的push方法用于传递一个对象，该对象的写法与通过RouterLink组件“to”属性的对象写法一模一样。也可以用Router对象的replace方法，只是没有历史记录。（关于push与replace的区别参看上一章）

4. 总结

子路径在定义时，写在父级路径的“children”属性下，且子路由的path属性不需要以“/”开头；
使用params传参时，定义路由时必须定义name属性，同时path属性需要添加占位符，格式为“/:参数1/:参数2…”；
通过RouterLink组件“to”属性的对象写法进行params传参时，必须使用name属性而不能用path属性；
props传参是在params传参基础上定义的，故在调用RouterLink时，仍然只能使用name属性；
useRoute()创建的对象是响应式对象，但如果解构则会变成非响应式。如果需要路由参数在界面上更新，则必须用toRef、toRefs处理；
如果需要高级功能，如跳转、鉴权、自定义链接标签（RouterLink实际上被转换为a便签），则需要使用编程式控制路由；
注意useRoute与useRouter。useRoute方法返回一个Route对象，该对象用于对路由规则进行管理；useRouter返回的是Router对象，用于执行路由动作（如跳转、传值等），可以理解为路由器；注意两者的使用场景。

VUE3快速入门（10）——路由的基础使用

Tue, 18 Mar 2025 18:23:35 +0800

1. 什么是路由

路由是指根据不同的URL加载不同的组件，其典型应用是后台页面，点击不同的菜单显示不同的页面。通过使用路由，能实现SPA页面、无刷新加载、部分页面加载的功能，是VUE最为典型的一种功能。

2. 准备工作

2.1 搭建导航区与展示区框架

本文实现一个功能：导航有三个按钮，分别是“首页”、“新闻”、“关于”。点击三个按钮在展示区显示不同的页面。
App.vue代码如下：

<template>
    <!--这是导航区-->
      <nav>
        <ol>
          <li><a href="#">首页</a></li>
          <li><a>新闻</a></li>
          <li><a>关于</a></li>
        </ol>
      </nav>
    <!--这是展示区-->
      <div id="content"></div>
</template>

2.2 创建路由视图页

在源码目录下新建views目录，用于单独存放路由视图组件，目录内建立Home.vue、News.vue、About.vue，分别对应“首页”、“新闻”、“关于”的具体内容。具体代码略。

2.3 安装路由

npm install vue-router

上述代码将会自动安装VUE3的路由组件。

3. 使用路由

3.1 定义路由（History模式）

在源码目录新建目录router，再创建index.ts文件作为路由定义文件。
首先引用路由以及需要使用的路由视图：

import { createRouter, createWebHistory } from 'vue-router'
//三个准备好的路由视图
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'

其次定义路由，关键是路径与路由视图的对应关系：

const router = createRouter({
  //路由模式
  history: createWebHistory(),
  //路由映射关系
  routes: [
    {
      path: '/home',//路径 
      component: Home,//加载的组件 
    },
    {
      path: '/news',
      component: News,
    },
    {
      path: '/about',
      component: About,
    }
  ],
})

createRouter函数中传入对象的history属性用于指定路由模式为“WebHistory”模式，routes用于指明路径与页面的映射关系，类型为键值对数组。
注意：创建路由时，必须指定使用哪一种路由模式。

记得将定义好的路由暴露出去

export default router

3.2 加载路由

在main.ts入口文件中，引用定义好的路由，在原始代码基础上新增如下代码：

import router from '@/router/index'
app.use(router)//注意该代码放在const app = createApp(App)之后

3.3 处理视图

首先添加引用：import { RouterLink, RouterView } from ‘vue-router’
其次将App.vue的a标签替换为RouterLink组件：

<li><RouterLink to="/home">首页</RouterLink></li>
<li><RouterLink to="/news">新闻</RouterLink></li>
<li><RouterLink to="/about">关于</RouterLink></li>

最后在原本要展示内容的位置写上RouterView标签：
<RouterView></RouterView>

最终效果：在页面上点击三个按钮，可以看到浏览器地址的路径在变化，同时页面展示区显示了三个按钮对应的页面。

4. 更换路由模式（Hash模式）

在上述示例代码中使用了History模式，现在替换为Hash模式。修改路由定义文件@/router/index.js
更改引用：

import { createRouter, createWebHashHistory } from 'vue-router'
//...

更改创建路由的代码：

const router = createRouter({
  history: createWebHashHistory(),//此处修改为了createWebHashHistory
  //...
})

此时浏览器中出现了一个“/#/”部分。

5. RouterLink组件“to”属性的两种写法

5.1 字符串写法

见前文。

5.2 对象写法

5.2.1 对象的路径属性

代码如下：

<li><RouterLink :to="{path:'/home'}">首页</RouterLink></li>
<li><RouterLink :to="{path:'/news'}">新闻</RouterLink></li>
<li><RouterLink :to="{path:'/about}">关于</RouterLink></li>

该写法传入了一个包含path属性的对象。

5.2.1 对象的名字属性（命名路由）

修改路由定义文件，增加name属性：

//@/router/index.ts
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home,
    }
    //...
  ],
})

将对象写法的path属性改为name即可：

<li><RouterLink :to="{name:'home'}">首页</RouterLink></li>

6. 处理历史记录

RouterLink组件有两种模式，push与replace。push模式允许从浏览器后退而replace不行，默认为push模式。修改为replace模式仅需增加replace选项即可：

<RouterLink replace :to="{name:'home'}">首页</RouterLink>

7. 重定向

重定向可以让某个路径转到到另一个已存在的路径：

  routes: [
    //...
    {
      path: '/',
      redirect: '/home',
    }
  ],

上述代码将默认首页跳转到了/home路径。

8. 注意事项

在定义路由时，必须指定路由的模式；
定义好的路由记得在入口文件中引用；
路由链接必须使用专门的RouterLink组件，视图显示也必须使用专门的RouterView组件；
当视图不显示时，对应的视图组件是被卸载了而不是被隐藏了；
history模式浏览器地址没有“#”号，但需要服务端处理路径问题，SEO友好；而hash模式带有“#”号，服务端无需特别处理，SEO较差；最佳实践：To C用history，To B用Hash；
注意编码规范，为了区分一般组件和路由视图组件，最好把路由视图组件单独放在pages或views目录下。

关于“拓源纯净主题”引发的Undefined array key "pro" 的修复

Sat, 23 Nov 2024 18:49:25 +0800

本博客使用的是由拓源推出的“纯净主题”。目前发现一个由于IP查询接口触发的问题，导致主题需要显示IP归属地的页面（如留言、评论页等）会出现如下错误：

经检查，该主题的 tpure_IP函数使用了一个“https://whois.pconline.com.cn/ipJson.jsp” 接口查询IP归属地，但该接口不稳定，时常返回空，所以触发了上述问题。修改方式如下：

1 定位到函数

在该主题的安装目录下（位置：/zblog的安装目录/zb_users/theme/tpure）,打开includes.php 在编辑器中按“Ctrl+F”搜索函数：tpure_IP。找到如下代码：

function tpure_IP($ip)
{
     $ch = curl_init();
     $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip;
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
     curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false );
     curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
     $location = curl_exec($ch);
     curl_close($ch);
     $location = mb_convert_encoding($location, 'utf-8','GB2312');
     $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1));
     $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location)));
     parse_str($location,$ip_location);
     return $ip_location['pro'];
}

2 更换查询接口，实现自己的解析方式

在function tpure_IP($ip)代码前增加函数ip_parser($ip)，完整代码如下：

function ip_query($ip)
{
    $url = "https://opendata.baidu.com/api.php?query={$ip}&co=&resource_id=6006&oe=utf8";//此处使用百度API
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false );
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    $location = curl_exec($ch);
    curl_close($ch);
    $ip_obj = json_decode($location, true);
    
    if(0 != count($ip_obj['data']) && array_key_exists('location', $ip_obj['data'][0]))
        return $ip_obj['data'][0]['location'];
    else
        return '未知';
}

注意，该代码一定要放在tpure_IP函数的前面。

3 注释原来的代码，调用新的函数

将tpure_IP函数体内的代码全部用/**/注释，并在最后添加ip_query的调用代码，如下：

function tpure_IP($ip)
{
    /*
    $ch = curl_init();
     $url = 'https://whois.pconline.com.cn/ipJson.jsp?ip='.$ip;
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
     curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false );
     curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
     $location = curl_exec($ch);
     curl_close($ch);
     $location = mb_convert_encoding($location, 'utf-8','GB2312');
     $location = substr($location, strlen('({')+strpos($location, '({'),(strlen($location) - strpos($location, '})'))*(-1));
     $location = str_replace('"',"",str_replace(":","=",str_replace(",","&",$location)));
     parse_str($location,$ip_location);
     return $ip_location['pro'];
     */
     return ip_query($ip);
}

相当于不再使用原本的实现，而使用自己的实现，但函数名称不变，保存即可。有动手能力的大佬也可以将API换成其他的，但是解析代码也同样要换。

点击下列链接可以下载本人修改好的文件进行替换。请注意备份好源文件！！！
include.php

VUE3快速入门（9）——插槽

Mon, 24 Jun 2024 11:34:52 +0800

插槽可以实现组件的样式由调用者决定的功能。本文讲述了默认插槽、具名插槽以及作用域插槽的三种使用方式。

1. 什么是插槽

插槽是指组件的部分或全部HTML样式由调用者决定，即动态的Template。例如组件的列表有可能是无序列表、有序列表或图片列表，无法在设计组件时指定，在这种情况下需要使用插槽。

2. 默认插槽

默认插槽类似HTML的嵌套标签。本节在上一节的基础上对员工列表组件进行改造(WorkerTableEx)，上一节组件的列表标题使用了<h1>标签，但调用者可能希望行换成其他的形式，这里使用默认插槽实现。

组件代码如下：

<template>
    <slot></slot><!-- 使用默认插槽形成占位符 -->
    <table id="main">
        <!-- 表格部分省略 -->
    </table>
</template>

则调用该组件的代码为：

<WorkerTableEx><h2>部门：办公室</h2></WorkerTableEx>
<WorkerTableEx><p>部门：办公室</p></WorkerTableEx>
<WorkerTableEx><img src="..."/></WorkerTableEx>

这样，表格的标题展示形式由调用者决定，它可以是头部标题、段落或者图片以及其他。

通过在<template>中使用<slot></slot>形成占位符，当调用者在组件标签中插入HTML片段或另一个组件时，VUE将会把插入的内容放到占位符中（有几个占位符就放几个）。

3. 具名插槽

有时希望多个占位符展示的内容不一样，这种情况需要使用具名插槽。假如要求表格底部可以显示备注信息，这就需要与展示标题的插槽区分开来：

<template>
    <slot name="title"></slot><!-- 使用具名插槽，标题显示部分 -->
    <table id="main">
        <!-- 表格部分代码省略 -->
    </table>
    <slot name="description"></slot><!-- 使用具名插槽，备注显示部分 -->
</template>

则调用该组件的代码为：

<WorkerTableEx>
    <template v-slot:title><!-- 使用v-slot指令 -->
        <h3>部门：办公室</h3>
    </template>

    <template #description><!-- v-slot语法糖 -->
        <p>导出时间：2024年6月26日</p>
    </template>
</WorkerTableEx>

提示：

使用v-slot指令可以指明内容放在组件的哪个插槽内，同时v-slot指令可以简写为“#”。
v-slot指令只能用在<template>标签和组件标签上，不能用在HTML标签上，因此使用具名插槽必须把普通HTML代码用<template>标签包裹。
由于使用了具名插槽，因此组件展示的内容顺序与调用者的编码顺序无关。

4. 作用域插槽

有时会有这样的需求：数据由组件生成（如请求服务器得到后端数据），但展示形式却由调用者决定，这种情况需要使用作用域插槽。作用域插槽常见于UI框架。

继续改造WorkerTableEx组件，其中该组件仅提供数据（员工、部门及导出时间）以及头部、正文和注脚三个具名插槽：

let ajax_data = ref(
    {
        workers:  [
            {id: 1234, sex: true, name: "张三", tel: "13600000000"},
            {id: 1235, sex: false, name: "李四", tel: "13600000001"},
            {id: 1235, sex: false, name: "王五", tel: "13600000002"},
            {id: 1234, sex: false, name: "赵六"}
        ],
        department: "技术部",
        exp_t: "2024年6月27日20:22:37"
    });//实际开发从应从服务器获取

组件的模板部分：

<template>
    <slot :title="ajax_data.title" name="header"></slot>
    <slot :workers="ajax_data.workers" name="content"></slot>
    <slot :exp_t="ajax_data.exp_t" name="footer"></slot>
</template>

上述代码使用了具名作用域插槽，将ajax_data的title、workers和exp_t属性分别绑定到三个不同的具名插槽。

则调用者的代码为：

<WorkerTableEx>

    <template #header="parame">
        <h3>部门：{{ parame.title }}</h3>
    </template>

    <template #footer="parame">
        <p>导出时间：{{ parame.exp_t }}</p>
    </template>

    <template #content="parame">
        <table id="main">
            <thead>
                <tr>
                    <th scope="col">员工号码</th>
                    <th scope="col">姓名</th>
                    <th scope="col">性别</th>
                    <th scope="col">电话</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for=" (item, index) in parame.workers" :key="item.id">
                    <th scope="col">{{ item.id }}</th>
                    <td scope="col">{{ item.name }}</td>
                    <td scope="col">{{ item.sex ? '男' : '女' }}</td>
                    <td scope="col">{{ item.tel }}</td>
                </tr>
            </tbody>
        </table>
    </template>

</WorkerTableEx>

提示：

无论组件传递了几个属性，即使分部在不同的插槽上，均会被打包成一个对象供调用者接收，调用者可以用任意名字（如上述代码中的“parame”）接收该对象。
由于接收的数据是对象，因此调用者可以直接解构：

<template #header="{title}">
    <h3>部门：{{ title }}</h3>
</template>
<template #header="{exp_t}">
    <h3>部门：{{ exp_t }}</h3>
</template>
//...

需熟悉的语法糖，调用者接收数据还有如下写法：

<template v-slot:header="{title}">
<!--<template v-slot:插槽名="用于接收数据的名称">-->

需熟悉的语法糖，组件绑定数据还有如下写法：

<slot v-bind="{workers: ajax_data.workers}" name="content"></slot>
<!--<slot v-bind="{属性名: 属性值}" name="content"></slot>-->

由于语法糖的存在，使得插槽存在多种写法，需要熟悉。尤其是在阅读一些框架代码的时候。

VUE3快速入门（8）——属性

Sun, 23 Jun 2024 14:20:46 +0800

本文讲述了组件属性的实现方法，以及如何限制属性的数据类型。

1. 什么是组件的属性

组件的属性是指可以由组件的调用者动态设置的参数，组件在运行时根据这些参数展现调用者需要的数据。组件的属性等同于HTML标签的属性。

2. 最简单的一个属性

本节实现一个展现员工信息的列表，第一步先传入一个“department”属性用于显示员工所属的部门。

2.1 属性的定义

定义属性：

import { defineProps } from "vue";//引入defineProps，该函数属于宏函数，实际无需引入
let props = defineProps(["department"]);//声明department为一个属性

defineProps方法传入一个字符串数组，其内容是将要被设为属性的变量名称。该方法同时返回一个对象，该对象由传入该组件所有属性的名称和值组成。

模板部分：

<template>
    <p>所属部门： {{ department }}</p>
</template>

2.2 使用组件并设置属性

<WorkerTable department="宣传科"></WorkerTable>

3. 强制类型限定

接下来新增一个属性：data，该属性是描述员工信息的数组，用于表格展示。其中模板部分如下：

<template>
    <h1>所属部门:{{ department }}</h1>
    <table id="main">
        <thead>
            <tr>
                <th scope="col">员工号码</th>
                <th scope="col">姓名</th>
                <th scope="col">性别</th>
                <th scope="col">电话</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for=" (item, index) in data" :key="item.id">
                <th scope="col">{{ item.id }}</th>
                <td scope="col">{{ item.name }}</td>
                <td scope="col">{{ item.sex ? '男' : '女' }}</td>
                <td scope="col">{{ item.tel }}</td>
            </tr>
        </tbody>
    </table>
</template>

根据模板的展示需求，员工信息需要包括ID、姓名、性别、电话等字段，如果上级组件传入的属性数据不符合员工字段的要求，则组件会出现显示异常。为避免这样的问题，需要检查属性数据的类型，当类型不符合要求时，禁止上级组件的属性赋值。

3.1 定义新类型

利用TS的接口类，定义一个员工数据类型，并导出：（建议新建一个名为WorkerTable的文件夹，该文件夹包含一个子文件夹src，用于存放组件的辅助代码，而组件的入口文件则与src同级）

//file：@/component/WorkerTable/src/IWorker.ts
export interface IWorker{
    // 序列号
    id: number,

    // 姓名
    name: string,

    // 性别
    sex: boolean,

    // 电话(可选)
    tel?: string
}

export type IWorkerArray = IWorker[];

该文件定义了一个员工类：IWorker以及它的数组类型：IWorkerArray。

3.2 类型检查

修改组件TS代码：

import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker";
defineProps<{department: string, data: IWorkerArray}>();//通过泛型进行类型检查并声明属性

上述代码有两个注意点：

引入类型需要使用type关键字
通过泛型的方式进行类型检查时，所有属性均需进行类型检查（要么所有，要么都不）

3.3 属性赋值

最后调用该组件的TS部分：

import WorkerTable from '@/components/WorkerTable/WorkeTable.vue';
import { ref } from "vue";

let workers = ref([
    {id: 1234, sex: true, name: "张三", tel: "13600000000"},
    {id: 1235, sex: false, name: "李四", tel: "13600000001"},
    {id: 1235, sex: false, name: "王五", tel: "13600000002"},
    {id: 1234, sex: false, name: "赵六"}
]);

也可以向ref（reactive）传递泛型，在此处限定workers的类型：

import { type IWorkerArray } from '@/components/WorkerTable/src/IWorker';
import { ref } from "vue";

let workers = ref<IWorkerArray>(...);

但由于WorkerTable组件已经进行了类型检查，因此上述代码的写法似乎没必要。

模板部分：

<WorkerTable department="办公室" :data="workers"></WorkerTable>

注意：

当传入的属性不符合类型要求时，代码将无法运行，避免显示异常。
属性的“：”表示后面的内容作为表达式解析，如果不加“：”，则将会把“workers”作为字符串而不是变量，也可使用 v-bind指令进行属性绑定：

<WorkerTable department="办公室" v-bind:data="workers"></WorkerTable>

4. 可选属性与默认值

某些时候允许调用者不对属性赋值，因此需要使用可选属性。当调用者不赋值时，有时需自动给出默认值。修改组件TS代码：

//file: @/component/WorkerTable/WorkerTable.vue
import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker";
import { withDefaults } from "vue";

withDefaults(defineProps<{department?: string, data?: IWorkerArray}>(), {
    department: "默认部门",
    data: () => [{id: 0, sex: true, name: "默认", tel: "0000"}]
});

这样当调用者不对该组件进行任何属性(或仅部分)的赋值，就会显示默认数据：

<WorkerTable></WorkerTable>

注意

withDefaults的两个参数分别为defineProps声明的属性、由默认属性组成的对象。
在属性声明后加“？”表示可选属性，如果没有“？”则为必选属性，调用者不赋值会出错。
对象类型的默认值必须以函数的形式返回。

VUE3快速入门（7）——监视

Thu, 16 May 2024 11:23:22 +0800

本文讲述了监视基础数据类、对象数据类的方法。

1. 什么是监视

监视是指，当被监视的对象发生变化时，执行某个逻辑，类似于控件的消息事件。从被监视的数据类型分类，可分为监视ref创建的普通类型、ref创建的对象类型、reactive创建的对象类型三类；从被监视数据的完整与否又可分为监视整个对象和监视部分属性。

2. ref类型的监视

2.1 基础类型

import { ref, watch } from 'vue'//引入watch
let input_content = ref(0);//创建一个基础数据类型
//使用watch方法实现监视
watch(input_content, (newVal, oldVal)=>{
    console.log("值：", newVal, oldVal)
});

关于watch方法的参数：

参数1：需要时监视的变量；
参数2：回调函数，其中有两个传入参数，分别为新值和的值；也可以只有一个参数，即为新值；
参数3：配置对象，用于指定一些其他功能，如立即监视、深度监视等。

2.2 监视整个对象

监视由ref定义的对象类型，其实是在监控对象类型的地址，因此部分字段的更新不会触发监视，需要手动开启深度监视。在这种情况下，任何一个字段的变化都会触发监视。

例子：监控员工年龄变化，当到达35岁时让其卷铺盖走人。
HTML部分：

<button @click="add()">+1</button>

JS部分：

import { ref, watch } from 'vue'//引入watch

let worker = ref({
    name: "张三",
    age: 32
});

function add(): any
{
    worker.value.age += 1;
}

const stop = watch(worker, (newVal, oldVal)=>{
    console.log("值：", newVal, oldVal)
        
    if(newVal.age > 35)
    {
        alert("卷铺盖走人");
        stop();//停止监视
    }
}, {deep: true});//第三个参数开启深度监视

提示：

上述代码中，watch返回了一个函数，调用该函数时会停止当前的监视；
watch的第三个参数开启了深度监视选项，这样仅变化对象成员时，也会触发监视调用；
控制台打印的newVal, oldVal值均相同，因为对象的地址没有发生变化。

2.3 监视对象的属性(部分监视)

很多时候，我们仅需要关注对象的某几个字段是否发生了变化，即部分监视。对象的部分属性又可能是基础类型，也可能是一个嵌套的对象。因此部分监视又分为基础数据类型和对象数据类型两种。

2.3.1 属性为基础数据类型

需要将被监视的数据包装为getter函数

import { ref, watch } from 'vue'//引入watch

let worker = ref({
    name: "张三",
    age: 32
});

function add(): any
{
    worker.value.age += 1;
}

const stop = watch(()=>{ return worker.value.age }, (newVal, oldVal)=>{
    console.log("值：", newVal, oldVal)

    if(newVal > 35)
    {
        alert("卷铺盖走人");
        stop();//停止监视
    }
});

注意箭头函数也可以简写成：

()=> worker.value.age

2.3.2 属性为对象类型

即嵌套对象，修改worker代码，增加银行存款账户的嵌套对象类属性：

let worker = ref({
    name: "张三",
    age: 32,
    accounts:
    {
        icbc: 2000,
        bc: 1200
    }
});

增加存款和清零的功能：

<button @click="icbc()">存入工行</button>
<button @click="bc()">存入中行</button>
<button @click="clear()">清零存款</button>

function icbc()
{
    //改变accounts的一个属性
     worker.value.accounts.icbc += 1000;
}

function bc()
{
    //改变accounts的一个属性
    worker.value.accounts.bc += 1000;
}

function clear()
{
    //改变整个accounts
    worker.value.accounts = {bc: 0, icbc: 0};
}

仅监视存款清零：

watch(() => worker.value.accounts, (newVal, oldVal)=>{
    console.log("账户变动：", newVal, oldVal)
});

监视存款清零和增加存款：

watch(() => worker.value.accounts, (newVal, oldVal)=>{
    console.log("存款清零：", newVal, oldVal)
},{deep: true});//开启了深度监视

提示：

与整个对象的监视不同，部分监视即使该部分是对象，也必须写成getter函数形式，在这种情况下监视的是部分对象的地址；
监视嵌套对象的内部属性，开启深度监视即可;
最佳编码方式是，由ref创建的对象，只要是部分监视，则一律写成getter函数。

3. reactive类型的监视

将worker修改为由reactive定义的响应式对象，特别注意整体修改accounts属性的写法：

function clear()
{
    Object.assign(worker.accounts, {bc: 0, icbc: 0});
}

监视accounts属性：

watch(worker.accounts, (newVal, oldVal)=>{
    console.log("账户变动：", newVal, oldVal)
});

当accounts内部或整体变化时，均能触发监视。
提示：

监视由reactive创建的对象，其默认开启了深度监视。

4. 监视多个数据

监视多个数据时，只需要将它们放到一个数组中作为一个整体即可。
例如，同时监控两个账户的变化：

watch([()=> worker.value.accounts.icbc, () => worker.value.accounts.bc], (val) => {
    console.log("同时监视两个账户", val);
});

提示：

数组内元素的具体写法需遵守基础数据、嵌套对象数据的监视写法；
回调函数的传入参数也就变成了数组。

5. 最佳实践

本节涉及的情况较多，但就开发而言，推荐选用最稳的情况：

使用ref创建响应式对象（支持整体替换）；
在上述前提下，一律使用getter函数作为监视源（即使它是嵌套的对象），再视情况决定是否开启深度监视。

6. watchEffect

watchEffect用于自动推断要监视的变量，适合需要同时监控多个变量的场合。
例子：监控员工的年龄、存款

const stop = watchEffect(()=>{
    if(worker.value.age > 35)
    {
        alert("卷铺盖走人");
    }
        
    if(worker.value.accounts.icbc >= 10000 || worker.value.accounts.bc >= 10000)
    {
        //其他逻辑
    }
});

提示：

watchEffect能自动判断需要监视的内容；
watchEffect会立即执行一次监视；
watchEffect的返回值也是一个函数，用于停止监视。

VUE3快速入门（6）——计算属性

Tue, 23 Apr 2024 13:40:46 +0800

本节讲述了Vue3的计算属性的用法。

1. 什么是计算属性

计算属性用于对一些需要展示到模板上的数据进行处理，虽然用函数也能实现，但计算属性会自动缓存，只有值发生变化时才重新计算，加快运行效率。

2. 基本使用方法

本节实现一个功能，将输入的电话号码隐去中间四位。

2.1 引用computed

import { computed } from 'vue';

2.2 使用computed方法定义一个计算属性

let encoded_tel = computed(() => {
    let part_1 = worker.value.tel.substring(0, 3);
    let part_2 = worker.value.tel.slice(-4);
    return part_1 + "****" + part_2;
});

其中worker是由ref定义的响应式数据，通过输入框修改电话号码并实时显示的方法参考上一节：VUE3快速入门（5）——响应式数据。

2.3 在模板中使用

将上一节的模板变量改为：

<h2>电话号码： {{ encoded_tel }}</h2>

这样，当输入电话号码并点击“修改”后，号码将隐去中间四位。

3. 计算属性的读写性

如果要通过代码修改计算属性的值，则：

function changeComputed()
{
    encoded_tel.value = "...";
}

3.1 只读

第二节定义计算属性的方式属于只读属性，采用上述方法修改计算属性的值会报错。

3.2 可读可写

要修改计算属性的值，必须定义getter和setter：

let encoded_tel = computed(() => {
    get(){
        let part_1 = worker.value.tel.substring(0, 3);
        let part_2 = worker.value.tel.slice(-4);
        return part_1 + "****" + part_2;
    },
    set(val){
        //针对val的逻辑处理代码
    }
});

4. 总结

计算属性与函数类似，但计算属性有缓存，如多次调用其值不变，则仅计算一次；
计算属性如果要通过代码修改值，则必须定义getter和setter；
对计算属性的value字段赋值，仅仅触发setter的调用，实际上并没有修改任何值，还需要在setter里面编写逻辑处理代码！

VUE3快速入门（5）——响应式数据

Mon, 15 Apr 2024 11:21:47 +0800

本节讲述了如何用ref和reactive实现基本数据类型和对象数据类型的响应式更新，同时讲述了在何种情况下会失去响应式功能以及对应的解决办法。

1. 什么是响应式

响应式是指当变量的值变化后，<template>的内容同步自动更新。Vue2的选项式API中的data默认为响应式，但Vue3的组合式API为非响应式，即无法自动更新。因此需要用ref和reactive进行处理。

2.基本数据类型的响应式处理

基本数据类型是指字符串和数字，这种类型只能用ref处理。

2.1 表单输入的响应式更新

本节实现HTML标签实时显示表单内容的功能。

在上一节的基础上增加一个HTML元素，用来实时显示表单的输入值：

<h2>input框的内容： {{ input_content }}</h2>
<input v-model="input_content"/>

修改<script>代码：

import { ref } from 'vue'
let input_content = ref('');

对比上一节代码(2.2小节)，input_content此时通过ref进行了定义。执行代码，当在input框内输入数据时，<h2>标签的内容将同步更新，此时的input_content为响应式数据。

2.2 代码操作的响应式更新

本节实现按钮单击实时更改HTML标签内容的功能。

新增按钮并绑定事件：

<button @click="add()">+1</button>

事件处理方法：

function add()
{
    input_content.value += 1;//注意：必须通过“ref的实例名.value.字段”的形式更新
}

单击按钮，页面上的数字加1，即通过代码实现了页面的更新。

3. 对象数据类型的响应式处理

对象数据类的响应式处理既可以用ref又可以用reactive。

本节将实现通过输入框更改对象的一个字段，并实时显示的功能。<template>部分代码如下：

<h2>电话号码： {{ worker.tel }}</h2><!--注意此处对象实例.字段的写法，不受ref或reactive的影响-->
<input v-model="tel"/>
<button @click="changeTel(tel)">修改电话</button>

3.1 通过ref处理

定义表单绑定的变量、事件方法，并通过ref定义一个对象：

import { ref } from 'vue'
let worker = ref({
    name: "Jesse",
    age: 12,
    mail: "3898*******@qq.com",
    tel: "136****615"
});

let tel = "";

function changeTel(content: any): any
{
    worker.value.tel = content;//同样通过“ref的实例名.value.字段”的形式更新
}

输入新的号码并点击按钮，将更新worker对象的tel字段，且在页面同步更新。

3.2 通过reactive处理

修改代码如下：

import { reactive } from 'vue'
let worker = reactive({
    name: "Jesse",
    age: 12,
    mail: "3898*******@qq.com",
    tel: "136****615"
});

let tel = "";

function changeTel(content: any): any
{
    worker.tel = content;//注意此处与ref的区别，不再需要.value
}

4. 丢失响应功能的情况

当整体替换对象或解构对象时，可能会丢失响应式功能。

4.1 对象类型的字段批量更新

很多时候希望将服务器返回的数据直接赋值给对象，从而更新多个的字段。在JS/TS里，服务器返回的数据被视为一个新的对象，如果采用直接赋值的方式会失去响应式功能。

//之前定义的对象
let worker = reactive({
    name: "Jesse",
    age: 12,
    mail: "3898*******@qq.com",
    tel: "136****615"
});

function getPost(content: any): any
{
    let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
    /*
    假设ajax_obj对象如下：
    {
        name: "Alice",
        age: 14,
        mail: "1234*******@qq.com",
        tel: "132****777"
    }
    */
    
    worker = reactive(ajax_obj)//尝试通过这样的方式更新多个字段的内容将会失去响应式功能。
}

4.1.1 逐字段赋值

function getPost(content: any): any
{
    let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
    
    worker.name = ajax_obj.name;
    wroker.age = ajax_obj.age;
    //...
}

这种方法适合字段较少的情况。

4.1.2 使用Object.assgin

Object.assgin的主要功能是对象合并，第一个参数是原始对象，后面的参数是要合并的多个对象。但使用Object.assgin在某些情况可能不适用。

function getPost(content: any): any
{
    let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
    
    worker = Object.assgin(worker, ajax_obj);
}

4.1.3 使用ref

将原始对象的定义改为ref即可。

//之前定义的对象
let worker = ref({
    name: "Jesse",
    //...
});

function getPost(content: any): any
{
    let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
    
    worker.value = ajax_obj;//通过value属性直接赋值
}

4.1.4 嵌套定义，变为部分字段更新

如果非要用reactive且不想用Object.assgin，则可以采用此方法。

//之前定义的对象
let worker =reactive({
    data: {
        name: "Jesse",
        //...
    }
});

function getPost(content: any): any
{
    let ajax_obj = JSON.parse(content);//解码JSON，转换成对象
    
    worker.data = ajax_obj;//相当于只更新data字段
}

4.2 提取一个或多个字段的值

有时只需要使用对象的部分字段，则经过对象的解构后，新定义的变量将失去响应功能。如：

let worker = ref({
    name: "Jesse",
    //...
});

let {name, age} = worker;//提取worker中的部分字段，这样定义会让name, age丢失响应功能

4.2.1 使用toRefs批量处理

import { toRefs } from 'vue'
let {name, age} = toRefs(worker);//此时name和age为响应式
//注意更新数据仍然需要使用.value
name.value = "...";
age.value += 1;

4.2.2 使用toRef逐个处理

toRef方法的参数为：toRef(源对象，字段名)

import { toRef } from 'vue'
let name = toRef(worker, 'name');//此时name和age为响应式
let age = toRef(worker, 'age');//此时name和age为响应式
//注意更新数据仍然需要使用.value
name.value = "...";
age.value += 1;

5. 关于对象重新赋值导致响应式失效的解释

ref 定义数据（包括对象）时，都会变成 RefImpl(Ref 引用对象) 类的实例，无论是修改还是重新赋值都会调用 setter，都会经过 reactive 方法处理为响应式对象。
但是 reactive 定义数据（必须是对象），是直接调用 reactive 方法处理成响应式对象。如果重新赋值，就会丢失原来响应式对象的引用地址，变成一个新的引用地址，这个新的引用地址指向的对象是没有经过 reactive 方法处理的，所以是一个普通对象，而不是响应式对象。解构同理。

6. 总结

组合式API必须通过ref和reactive定义数据才能实现响应式功能；
模板中使用对象的某个字段，直接通过“{{实例名.字段名}}”实现，不受ref或reactive的影响；
ref能处理任何数据，但reactive只能定义对象类型；
ref的更新必须通过.value字段，reactive直接赋值；
特别注意，当需要用后端返回的对象去替换（无论返回的对象字段内容有几个跟源对象不一致）源对象时，如果整体直接赋值可能将丢掉响应式功能；
特别注意，如果解构对象还需要保持响应式，则需要用toRefs或toRef处理。

VUE3快速入门（4）——Setup语法糖与数据绑定

Sat, 13 Apr 2024 08:51:56 +0800

本文讲述了如何使用Setup语法糖简化代码，以及如何获取表单数据。在本系列后续的文章中，均使用setup语法糖写法。

1. Setup语法糖

使用Setup导出数据或者方法必须使用return，当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容，也不必再写setup方法名。

1.1 声明组件导出

首先将<script>代码中的setup方法部分全部移除，仅留下组件导出声明：

<script lang="ts">
export default {
    name: "MyComp",
}

1.2 创建setup语法糖

其次，新增一个<script>片段，如下：

<script lang="ts" setup>
    
</script>

注意：

lang属性对应的语言必须与上一个<script>的代码语言一致，不得JS、TS混用；
setup语法糖所在的<script>必须增加一个setup属性

1.3 在setup语法糖标签内写代码

最后将原本setup方法里面的内容除了return外全部放入后一个<script>标签内，完整代码如下：

<script lang="ts" setup>
    let author = "Jesse";
    let mail = "3898xxxx@qq.com";
    let tel = "136****615";
    
    function add(a: number, b: number): number{
        return a + b;
    }

    function show(content: any): any
    {
        alert(content);
    }
    
    //无需return {author, mail, ...}
</script>

这样，凡是在setup语法糖内定义的数据和方法全部自动导出，不用再return。

2. 数据绑定

数据绑定是指获取表单中填写的值。

2.1 创建一个表单

在合适位置增加一个表单标签： <input name=””/>

2.2 创建变量并绑定表单的值

创建一个变量，用于接收表单的值：

let input_content = ""

在表单标签内使用v-model指令将表单值与该变量绑定：

<input name="" v-model="input_content"/>

2.3 测试

修改button的click事件，单击时弹出表单的值：

<button @click="show(input_content)">单击</button>

其中show方法代码：

function show(content: any): any
{
    alert(content);
}

3. 总结

使用setup语法糖就无需再显式声明导出的内容，但要求两个<script>片段语言类型一致；
v-model指令用于将表单值与变量绑定；
v-model指令仅能用于表单相关的标签。

VUE3快速入门（3）——方法与事件

Thu, 08 Feb 2024 21:44:14 +0800

本文讲述了如何在自定义组件中定义并调用方法，以及绑定DOM事件响应的方法。

1. 自定义方法

1.1 定义一个方法

在<script>标签内的setup方法内增加一个add方法，该方法传入两个参数，用于求和：

function add(a: number, b: number): number{
    return a + b;
}

同时，将add方法暴露（返回）：

return {author, mail, tel, add};//author, mail, tel是上一节定义的变量

1.2 调用方法

在<template>标签内，适当位置增加一个标签，用于调用方法：

<h2>调用add方法： {{add(1,1)}}</h2>

1.3 查看结果

编译、构建成功后，浏览器新出现“调用add方法： 2”的字样，说明求和方法被成功调用。

2. 绑定事件

前端开发少不了处理DOM事件，如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。

2.1 绑定一个事件

在<template>标签内，适当位置增加一个按钮，绑定click方法：

<button @click="show(tel)">点我</button>

单击会调用test函数，并传入tel的值，该值在上一节已经定义：

let author = "Jesse";
let mail = "3898xxxx@qq.com";
let tel = "136****615";

2.2 完善事件处理方法

在<script>标签内setup方法内，再增加show方法，该方法具有一个传输参数：

function show(content: any): any
{
    alert(content);
}

同时记得暴露该方法：

return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量

2.3 执行

编译、构建成功后，浏览器会出现一个按钮，点击按钮，将弹出对话框，其内容是tel变量的内容。

3. 总结

方法与变量一样需要写在methods属性内。
@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。
除了click外，还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。

4. 拓展学习与思考

除了v-on指令外，学习v-if、v-show、v-for的用法。
尝试处理submit、onfocus等其他常见DOM事件。