Vue Router 路由

配置

配置 Route

import路径为相对于当前文件的路径。

const routes = [
    {
        path: "/path",
        component: () => import("path-to-page.vue")
    },
    // ...
]

使用 @ 指定根目录

要在import路径中使用@符号来代表指定的根目录，需要进行配置。

在 vite.config.js 中，添加resolve属性。

Vue3 基础

响应式

监听数据改动并自动更新。

使用ref()和reactive()包装值，生成Proxy代理，劫持对象的调用和操作。
get时，将自身添加为被依赖值，进行依赖收集。（effect中会设置当前执行的函数）
set时，触发更新，重新调用依赖自身的函数。

绑定属性

• 全写：v-bind:name="xxx"
• 简写：:name="xxx"

绑定事件

• 全写：v-on:event="xxx"

• 简写：@event="xxx"

  阅读剩余部分

今天在写一个显示当前时间的网页，用了一个回调，来每秒更新时间。
但是实际运行时，时间并没有动态更新。

原因

仔细查了一下，原来是 Javascript 函数的 this 是在调用函数时确定的。

foo.call(this,args...);

观察一下函数的call函数的签名，可以发现第一个参数传入了 this 的值，函数运行时的 this 就是调用时传入的 this。
而回调函数被执行时，this已经不是我们原来预想的this了，所以变量没有被更改。

解决

那么如果要用回调函数，使用原来的this，该怎么办呢？
函数里提供了bind函数，可以用来内定函数调用时this的值和参数。

foo.bind(this,args...);

而在bind时写的参数，在执行时就会被插入到参数列表的最前面，可以用来内定前几个参数的值。
调用了bind之后，返回的是一个新的函数，它的this和前几个参数已经被内定死了。
之后函数被调用时无论传入的this是什么，实际执行时的this始终都是bind时内定好的this。