面试 Vue，这几个知识点要掌握

2023-10-09 09:08:29

Vue watch 的高级用法

handle 方法

handle 方法可以让你在 watch 监听的属性发生变化时，执行自定义的函数。这个函数会收到两个参数：

oldVal：属性原来的值
newVal：属性新的值

例如，以下代码使用 handle 方法来监听 message 属性的变化，并在属性发生变化时，将新值打印到控制台：

watch: {
  message: {
    handle(newVal, oldVal) {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    }
  }
}

deep 和 immediate

deep 选项可以让你监听对象的深度变化。这意味着，如果对象中的某个属性发生了变化，watch 监听器也会被触发。

immediate 选项可以让你在组件创建时立即执行一次 watch 监听器。这对于在组件创建时就需要获取数据的情况很有用。

例如，以下代码使用 deep 和 immediate 选项来监听 message 对象的变化，并在组件创建时立即执行一次 watch 监听器：

watch: {
  message: {
    deep: true,
    immediate: true,
    handle(newVal, oldVal) {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    }
  }
}

Vue2.0 v-for 中 :key 的作用

在 Vue2.0 中，使用 v-for 遍历数组时，必须为每个元素指定一个唯一的 key。key 的作用是帮助 Vue 跟踪数组元素的变化，以便在数组发生变化时，Vue 能够正确地更新 DOM。

key 可以是任何唯一的值，但通常使用元素的 id 或索引。例如，以下代码使用 v-for 遍历一个数组，并为每个元素指定了一个唯一的 key：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

Vue 组件的 props、methods 和 data 的关系

props 是组件的属性，用于接收父组件传递的数据。methods 是组件的方法，用于处理组件内部的逻辑。data 是组件的数据，用于存储组件内部的状态。

props 是只读的，不能在组件内部修改。methods 和 data 都是可变的，可以在组件内部修改。

例如，以下代码定义了一个 Vue 组件，该组件有一个名为 message 的 props，一个名为 handleClick 的 methods，以及一个名为 count 的 data：

export default {
  props: ['message'],
  methods: {
    handleClick() {
      this.count++
    }
  },
  data() {
    return {
      count: 0
    }
  }
}

Vue 路由的原理和使用

Vue 路由是一个用于管理 Vue.js 单页面应用程序 (SPA) 路由的库。它可以让你在不同的页面之间导航，而无需重新加载整个页面。

Vue 路由的工作原理是使用 HTML5 的 history API 来管理浏览器的历史记录。当用户在不同的页面之间导航时，Vue 路由会将当前页面的状态保存到浏览器的历史记录中，并更新浏览器的 URL。当用户返回到之前的页面时，Vue 路由会从浏览器的历史记录中恢复当前页面的状态。

要使用 Vue 路由，你首先需要安装它：

npm install vue-router

然后，你可以在 Vue.js 的实例中配置 Vue 路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router
}).$mount('#app')