Vue.js（简称 Vue）是一种开源的轻量级 JavaScript 框架，由 Evan You 于2014年首次发布。Vue 致力于在用户界面（UI）开发中实现数据与视图的双向绑定，为创建现代化 Web 应用、单页面应用（SPA）以及多种复杂界面提供了一种简洁、高效且可扩展的解决方案。

#### 核心特性

- **组件化：** Vue 包含了独立的、可复用的组件，有助于将 UI 切成逻辑部分、提高代码质量。
- **双向数据绑定：** 利用双向数据绑定，Vue 能自动更新 UI，对应数据模型发生改变时同步更新视图。
- **声明式渲染：** 编写模板完成数据驱动的视图，自动追踪依赖关系，并且在数据模型发生更改时仅重新计算最小必要部分。
- **虚拟DOM：** 通过 Vue 的虚拟 DOM 进行更效率的视图更新，降低视图更新所需的计算量。
- **响应式系统：** Vue 拥有一个响应式系统，当数据更改时会自动跟踪和更新所有相关视图。
- **易于集成：** Vue 可与其他 JavaScript 库或现有项目相互集成，同时方便和流行的前端工具链合作。

#### 主要模块

- **Vue Router：** 官方提供的路由管理器，有助于构建单页面应用程序。
- **Vuex：** 是一个状态管理库，有助于简化和规范在组件之间共享的数据和方法。
- **Vue CLI：** 是一个命令行工具，匹配各种扩展，有助于快速搭建 Vue 项目，包括开发、构建和部署。

#### 适用场景

- 单页面应用（SPA）开发：在单一页面中完成路由切换、状态管理和 UI 渲染等流程。
- Web 应用程序开发： Vue 可与其他库如 Axios 结合，方便地建立发起 HTTP 请求的 API 客户端。
- 组件库和 UI 框架：借助 Vue 的组件系统，可以构建封装的、具有丰富功能的 UI 组件和框架。
- 原型开发：使用 Vue 快速构建和验证产品原型，提高开发效率。

Vue 因易于入门、高度灵活、丰富的生态系统以及优异的性能而受到许多开发者的欢迎，是 Web 开发领域一种非常值得学习的前端框架。

### 面试回答：

在Vue.js中，如果我们想将路由链接封装在按钮中，通常我们会使用Vue Router库来实现。Vue Router是Vue.js的官方路由管理器，它允许我们通过组件来定义页面路由，从而实现单页面应用（SPA）。下面是如何在Vue.js项目中实现这一功能的步骤：

#### 第一步：安装并配置Vue Router

首先，确保你的项目中安装了Vue Router。如果还未安装，可以通过npm或yarn来安装：

```bash
npm install vue-router
```

或

```bash
yarn add vue-router
```

然后，创建一个router文件夹，并在其中创建一个`index.js`文件，用来设置和导出Vue Router实例：

```javascript
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage';
import AboutPage from '@/components/AboutPage';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'About',
      component: AboutPage,
    },
  ],
});
```

#### 第二步：在组件中使用`router-link`

在Vue.js中，我们通常使用`router-link`组件来导航。为了将其封装到按钮中，可以在`router-link`标签内包裹一个`button`标签。例如，如果你有一个向用户提供导航到主页的按钮，可以这样做：

```vue
<template>
  <div>
    <router-link to="/" tag="button">
      回到首页
    </router-link>
  </div>
</template>
```

在这里，`to="/"`表示目标路由路径，而`tag="button"`则将`router-link`渲染为一个`button`元素，而不是默认的`a`标签。

#### 第三步：样式调整

通常，按钮可能需要一些额外的样式来适应整体的UI设计。可以通过CSS来调整：

```css
<style>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #333;
}
</style>
```

#### 示例应用

假设我们在一个简单的项目中使用了以上技术，用户可以通过点击按钮来在“首页”和“关于页”之间切换。这不仅提高了用户体验，也使得页面转换更加平滑。

#### 总结

通过Vue Router和`router-link`组件，我们可以非常方便地将路由功能集成到Vue.js应用的按钮中。这种方法既保持了代码的简洁性，也符合Vue.js的组件化和模块化设计原则。

What is difference between ' data :' and ' data ()' in Vue. Js ?

在 Vue.js 中，watcher 通常用于监听组件中的数据变化。对于嵌套数据，我们需要采用一些特定的策略来确保 Vue 可以正确地监听到所有的变化。

### 1. 使用字符串路径监听嵌套属性

在 Vue.js 中，可以直接在 `watch` 选项中使用字符串路径来监听嵌套对象的属性。这种方式相对直观，Vue 会自动处理依赖追踪。

```javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    'userProfile.address.city'(newVal, oldVal) {
      console.log(`城市从 ${oldVal} 变更为 ${newVal}`);
    }
  }
}
```

### 2. 深度监听

如果需要监听一个嵌套对象内部的所有属性变化，可以使用 `deep: true` 选项。这告诉 Vue 创建一个深度 watcher，当嵌套数据中的任意属性发生变化时，都会触发 watch 函数。

```javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  watch: {
    userProfile: {
      handler(newVal, oldVal) {
        console.log('用户资料发生变化');
      },
      deep: true
    }
  }
}
```

### 3. 使用计算属性间接监听

有时候，直接使用 `watch` 对嵌套数据进行监听可能会让代码变得复杂，特别是当你需要根据某些嵌套属性计算出新的值时。此时，可以使用计算属性来简化操作，然后对这个计算属性进行监听。

```javascript
export default {
  data() {
    return {
      userProfile: {
        name: '张三',
        address: {
          city: '北京'
        }
      }
    };
  },
  computed: {
    city() {
      return this.userProfile.address.city;
    }
  },
  watch: {
    city(newVal, oldVal) {
      console.log(`城市从 ${oldVal} 变更为 ${newVal}`);
    }
  }
}
```

以上三种方法各有用武之地，具体使用哪一种取决于你的具体需求和数据结构。在实际开发中，建议根据实际情况选择最合适的监听策略。

How to properly watch for nested data in vuejs

在Vue.js项目中，Vue Router是用于单页面应用的路由管理器。在某些情况下，我们可能需要在Vue组件之外访问Vue Router的实例，例如在非组件的JavaScript文件中或在Vuex store中。下面我将分享一些方法和示例，来说明如何在Vue组件外部访问和操作Vue Router。

### 方法 1：创建并导出Router实例

首先，确保在创建Vue Router实例时将其导出。这样可以在其他文件中导入并使用这个Router实例。

**router/index.js:**
```javascript
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage';
import AboutPage from '@/components/AboutPage';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'About',
      component: AboutPage,
    },
  ]
});

export default router;
```

在其他文件中，你可以通过导入这个Router实例来使用它。

**someUtility.js:**
```javascript
import router from '@/router';

// 你可以使用router实例进行导航，比如：
function goToHome() {
  router.push('/');
}

export { goToHome };
```

### 方法 2：在Vue实例或Vuex Store中使用Router

如果你正在使用Vuex进行状态管理，你可能希望在actions中使用Vue Router。由于Vuex Store本身并不知道Router的存在，你需要在创建Store时将Router实例传递进去。

**store/index.js:**
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import router from '@/router';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {
    navigateToAbout({ commit }) {
      router.push('/about');
    }
  }
});
```

在这个例子中，我们可以在actions内部直接使用`router`实例进行页面导航。

### 方法 3：使用Event Bus或提供/注入机制

对于更复杂的应用架构，如果你不希望直接导入Router实例，可以考虑使用Vue的提供/注入机制或Event Bus来间接访问Router实例。

**总结：**
根据你的项目结构和需求，你可以选择最适合的方法来在Vue组件外部访问Vue Router。通常情况下，直接导出并导入Router实例是最简单直接的方法。然而，在大型应用或需要更多解耦的场景中，使用Vuex或Vue的依赖注入机制可能更适合。

Access VueRouter outside Vue components

`Vue.extend` 是 Vue.js 框架中的一个构造器，主要用于创建可复用的组件构造器。通过 `Vue.extend` 可以定义一个预设的组件选项（如 data, methods, computed properties 等），然后通过这个构造器可以创建具有相同功能和模板的多个 Vue 实例，从而实现组件的复用。

### 使用场景示例：

假设我们需要在多个位置创建具有相同功能的模态框组件，这个模态框有自己的模板、数据和方法。我们可以使用 `Vue.extend` 来定义这个模态框的基础结构和行为，然后在不同的地方创建它的实例。

```javascript
// 定义一个模态框组件
var ModalComponent = Vue.extend({
  template: '<div class="modal"><div class="modal-content">{{ message }}</div></div>',
  data: function() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    open: function() {
      // 模态框打开逻辑
      console.log('Modal is opened');
    }
  }
});

// 创建模态框实例
var modal1 = new ModalComponent();
var modal2 = new ModalComponent();

// 每个实例可以维护自己的状态和方法
modal1.message = 'First Instance';
modal2.message = 'Second Instance';

modal1.open();  // 打开第一个模态框
modal2.open();  // 打开第二个模态框
```

### 优点：

1. **代码复用**: `Vue.extend` 允许我们定义一次组件，然后在多个地方无限制地重复使用这些组件。
2. **独立性**: 每个通过 `Vue.extend` 创建的实例都是独立的，它们拥有自己的作用域和状态，这有助于避免实例之间的数据污染。
3. **组织性**: 使用 `Vue.extend` 可以帮助我们更好地组织代码，将组件的定义与使用分离，使代码更加模块化和易于维护。

通过这种方式，`Vue.extend` 在 Vue 应用程序中扮演着构建可复用组件的重要角色，特别适合那些需要在应用中多次出现的组件。

What is Vue.extend for?

在Vue中监控窗口大小的变化，可以通过几种方式实现。最常见的方式是利用`window`对象的`resize`事件，并在Vue组件的生命周期钩子中进行事件监听和移除。下面我将详细说明如何实现。

### 1. 使用生命周期钩子

在Vue组件中，我们可以在`mounted`钩子中添加`resize`事件监听器，并在`beforeDestroy`钩子中移除监听器。这样可以确保只有在组件被创建并挂载到DOM上时才监听窗口大小变化，并在组件销毁前正确清理事件监听器，防止内存泄漏。

#### 示例代码：

```javascript
<template>
  <div>
    <h1>当前窗口宽度: {{ windowWidth }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth
    };
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  }
}
</script>
```

### 2. 使用事件总线或Vuex进行状态管理

如果你的应用结构复杂，或者多个组件需要响应窗口大小的变化，可以考虑使用一个全局的事件总线或Vuex来管理窗口大小状态。这种方法可以让状态管理更集中、更易于维护。

#### 使用事件总线：
在Vue原型上添加一个事件总线，通过这个总线来触发和监听窗口大小变化的事件。

```javascript
// main.js
import Vue from 'vue';
Vue.prototype.$bus = new Vue(); // 添加事件总线

// 在组件中
mounted() {
  window.addEventListener('resize', () => {
    this.$bus.$emit('window-resize', window.innerWidth);
  });
},
beforeDestroy() {
  window.removeEventListener('resize');
}

// 另一个依赖窗口宽度的组件
created() {
  this.$bus.$on('window-resize', (width) => {
    console.log('窗口宽度变化了:', width);
  });
},
beforeDestroy() {
  this.$bus.$off('window-resize');
}
```

#### 使用Vuex：

在Vuex store中定义一个窗口宽度的状态，并通过窗口`resize`事件来更新这个状态。

```javascript
// store.js
export default new Vuex.Store({
  state: {
    windowWidth: window.innerWidth
  },
  mutations: {
    setWindowWidth(state, width) {
      state.windowWidth = width;
    }
  },
  actions: {
    updateWindowWidth({ commit }) {
      window.addEventListener('resize', () => {
        commit('setWindowWidth', window.innerWidth);
      });
    }
  }
});
```

在组件中，你可以通过调用这个action来初始化监听，并通过计算属性来响应状态变化。

这些就是在Vue中监控窗口大小变化的一些常见方法。使用哪种方法取决于你的具体需求和项目结构。

How can I monitor changing window sizes in Vue?

在 Vue3 中获取 router 中的 params 可以通过使用 Vue Router 的几种不同方法来实现。Vue 3 提供了一个组合式 API，可以让我们通过 `useRoute` 这个函数来获取当前路由的信息，其中就包括了路由参数（params）。下面我将详细介绍如何在 Vue3 中使用这种方法来获取 params。

首先，确保你已经在你的 Vue 3 项目中安装并设置了 Vue Router。然后，你可以在任何组件中使用以下步骤来获取路由参数：

1. **导入 `useRoute`：** 在你的组件中，首先需要从 `vue-router` 包中导入 `useRoute` 函数。

```javascript
import { useRoute } from 'vue-router';
```

2. **使用 `useRoute` 来获取路由信息：** 在组件的 `setup` 函数中，调用 `useRoute` 函数。这将返回一个包含当前路由信息的响应式对象。

```javascript
setup() {
    const route = useRoute();
    return {
        // 可以直接从 route 对象中访问 params
        params: route.params,
    };
}
```

3. **访问 `params` 属性：** `route` 对象中的 `params` 属性包含了所有的路由参数。你可以直接通过 `route.params` 访问特定的路由参数。

```javascript
setup() {
    const route = useRoute();
    const userId = route.params.userId; // 假设URL中有一个名为 'userId' 的参数
    return {
        userId,
    };
}
```

### 实例：

假设我们有这样一个路由定义，路由中包含了一个名为 `userId` 的参数：

```javascript
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/user/:userId', component: User }
    ],
});
```

在 `User` 组件中，你可以使用上述方法来获取 `userId` 参数：

```javascript
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.userId;

console.log("当前的用户ID是:", userId);
</script>
```

### 小结：

使用 `useRoute` 是在 Vue 3 中获取路由参数的推荐方法，因为它利用了 Vue 的组合式 API，提供了更好的组织和可维护性。确保你的项目使用的是 Vue 3 和兼容的 Vue Router 版本来利用这些特性。

How to get params of router in Vue 3?

在 Web 开发中，Vue Router 主要用于单页面应用（SPA）中管理页面间的导航。通常情况下，Vue Router 处理的是在同一个浏览器标签中的视图切换，而不是打开新的浏览器标签。

然而，如果你想在新标签中打开一个链接，这通常不是 Vue Router 直接处理的，但可以通过传统的 HTML 方式来实现。例如，你可以在 Vue 组件中使用普通的 `<a>` 标签，并设置 `target="_blank"` 属性来在新标签中打开链接。这种方法并不依赖于 Vue Router，而是浏览器的标准行为。

```html
<template>
  <div>
    
    <a href="https://example.com" target="_blank">Visit Example.com</a>
  </div>
</template>
```

这种方法适用于那些需要从你的 Vue 应用中链接到外部页面或者完全不同的路由上下文的场景。对于 SPA 内部的路由，通常不建议在新的标签页中打开，因为这违背了单页面应用的设计初衷，即在一个单一的页面加载所有内容，通过 AJAX 来与服务器交互，从而避免页面的重新加载。

总结来说，虽然 Vue Router 本身不支持在新标签页中打开链接，但你可以使用传统的 HTML 方法来实现这一需求。这样做既简单又有效，且能够适用于需要从 SPA 跳转到其他网站或应用的场景。

Can vue-router open a link in a new tab?

在Vue.js中获取URL查询参数可以通过几种方式实现，具体取决于您的项目配置和您选择使用的路由管理库。以下是使用Vue.js和Vue Router的一些常见方法：

### 1. 使用 Vue Router 的 `$route.query`

假设您已经在项目中集成了Vue Router，您可以使用`$route.query`来访问URL中的查询参数。这个对象包含了当前路由的所有查询参数，其中每个字段的键是查询参数的名字，值是对应的值。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  mounted() {
    // 假设 URL 是： http://example.com/?name=John&age=30
    const name = this.$route.query.name; // John
    const age = this.$route.query.age; // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}
```

这种方法的好处是可以非常直观地获取和监视URL查询参数的变化。

### 2. 在没有 Vue Router 的情况下使用原生 JavaScript

如果您的项目没有使用Vue Router，您可以使用原生JavaScript的`URLSearchParams`对象来获取查询参数。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  mounted() {
    const params = new URLSearchParams(window.location.search);
    const name = params.get('name'); // John
    const age = params.get('age'); // 30
    console.log(`Name: ${name}, Age: ${age}`);
  }
}
```

这种方法适用于不使用Vue Router但仍需要访问URL查询参数的简单场景。

### 3. 监听路由变化

如果您需要在查询参数变化时进行响应，可以在Vue组件中监听`$route`对象的变化。

**示例代码：**

```javascript
export default {
  name: "MyComponent",
  watch: {
    '$route'(to, from) {
      // 只关注查询参数的变化
      if (to.query !== from.query) {
        console.log('Query parameters changed:', to.query);
      }
    }
  }
}
```

这可以帮助您处理更复杂的场景，比如查询参数变化时需要重新加载数据或执行其他动作。

### 总结

根据您的项目具体使用的技术栈（是否使用Vue Router等），可以选择适合的方法来获取URL中的查询参数。使用Vue Router的`$route.query`通常是最直接和易于管理的方式，但使用原生JavaScript也是一种不错的替代方案，尤其是在简单的应用中或者不使用Vue Router的情况下。

VueJs get url query

当您在Vue.js中需要获取元素的高度时，通常可以通过几种方式实现，包括使用`ref`属性以及直接在DOM上操作。下面我将详细说明这个过程，并提供一个具体的示例。

### 使用 `ref` 获取元素高度

在Vue.js中，`ref` 是一个特殊的属性，您可以通过它来访问组件的DOM节点。这是一个非常直观和常用的方法来获取元素的高度。

#### 步骤 1: 给元素添加 `ref` 属性

首先，您需要在您想要获取高度的元素上添加一个 `ref` 属性。例如，如果您想获取一个 `div` 的高度，可以这样做：

```html
<template>
  <div ref="myElement">
    这里是一些内容...
  </div>
</template>
```

这里，`ref="myElement"` 是一个引用标识，您将通过它访问这个 `div`。

#### 步骤 2: 在组件中访问该元素并获取高度

在Vue组件的生命周期钩子中，如 `mounted` 钩子，您可以通过 `this.$refs.myElement` 访问到这个 `div`，并获取其高度。

```javascript
<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const elementHeight = this.$refs.myElement.clientHeight;
      console.log('元素的高度是:', elementHeight);
    });
  }
}
</script>
```

在这里，我们使用 `this.$nextTick` 确保 DOM 更新完成后再进行高度的读取，这样可以确保获取到正确的高度。

#### 示例

以下是一个完整的Vue组件示例，展示了如何获取一个元素的高度：

```vue
<template>
  <div ref="myElement" style="height: 200px;">
    我的高度是200px，你可以通过Vue的ref来获取这个值。
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const elementHeight = this.$refs.myElement.clientHeight;
      console.log('元素的高度是:', elementHeight);
    });
  }
}
</script>
```

### 注意事项

- 确保在DOM实际渲染后获取元素的尺寸，通常在 `mounted` 钩子中使用 `$nextTick` 方法。
- 保持对组件的访问和操作尽量简洁和高效，避免不必要的重复渲染或DOM操作。

通过以上步骤，您可以在Vue.js应用中方便地获取任何元素的高度，并根据需要进行相应的操作或样式调整。

Get element height with Vuejs

在Vue中，当使用Vue Router进行路由管理时，Vue Router实例并不直接提供获取上一页URL的内置方法。但是，你可以通过一些方法来实现这个需求。

### 方法一：使用浏览器的`document.referrer`

这是最简单的方法，可以直接通过JavaScript的`document.referrer`来获取上一个访问页面的URL。这个属性会返回当前页面之前的一个页面的URL，如果没有前一个页面则返回空字符串。

```javascript
let previousUrl = document.referrer;
console.log(previousUrl); // 打印上一页的URL
```

### 方法二：监听路由变化并手动保存

Vue Router提供了导航守卫（navigation guards），你可以在这里监听路由的变化，并将当前路由保存下来，以便当路由变化时可以使用前一个路由。

1. 在你的主Vue实例中设置一个全局前置守卫：
   
```javascript
// main.js 或 router/index.js

router.beforeEach((to, from, next) => {
  // 保存从哪个页面来
  localStorage.setItem('previousUrl', from.fullPath);
  next();
});
```

2. 在需要获取上一页URL的地方读取：

```javascript
// 在组件中或其他任何需要的地方
let previousUrl = localStorage.getItem('previousUrl');
console.log(previousUrl);
```

### 方法三：使用Vuex进行状态管理

如果你的应用结构复杂，需要在多个组件间共享路由状态，可以考虑使用Vuex来管理这些状态。

1. 在Vuex中定义一个模块来存储路由状态：

```javascript
// store.js

const store = new Vuex.Store({
  state: {
    previousUrl: ''
  },
  mutations: {
    setPreviousUrl(state, url) {
      state.previousUrl = url;
    }
  }
});

export default store;
```

2. 在全局前置守卫中更新状态：

```javascript
router.beforeEach((to, from, next) => {
  store.commit('setPreviousUrl', from.fullPath);
  next();
});
```

3. 在组件中获取状态：

```javascript
computed: {
  previousUrl() {
    return this.$store.state.previousUrl;
  }
}
```

以上是几种常见的方法来获取Vue中的上一页URL。根据你的具体需要和应用的复杂度，可以选择合适的方法实现。

Vue -router - How to get previous page url?

在Vue.js中，当我们使用 `v-for`指令来渲染一个组件列表时，Vue推荐为每个通过 `v-for`创建的元素或组件绑定一个唯一的 `:key`属性。这个 `:key`属性是Vue用来追踪列表中每个节点的身份，从而可以高效地对虚拟DOM进行重用和重新排序。如果没有提供 `:key`，Vue将会使用非就地更新策略，可能会引发一些更新相关的问题，比如不正确的元素重用和状态保留等。

举一个简单的例子，假设我们有一个待办事项列表：  

```html
<template>
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js' },
        { id: 2, text: 'Build a project' },
        { id: 3, text: 'Find a job' }
      ]
    };
  }
};
</script>
```

在这个例子中，虽然列表可能会正确渲染，但是因为没有为每个 `<li>`绑定 `:key`属性，Vue会在控制台发出警告。我们可以通过为每个 `<li>`添加一个唯一的 `:key`来解决这个问题，通常是使用列表中每个项目的唯一标识符：

```html
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
</template>
```

在这个修改后的例子中，我们将 `:key`设置为 `todo.id`，这样每个待办事项都有了一个独一无二的键值。通过这样做，Vue就能够更有效地更新DOM，尤其是在这个列表发生变化时（比如排序、添加或删除项目）。这样可以避免不必要的元素渲染，使得整个列表的渲染性能得到优化。

综上所述，正确使用 `:key`是保证列表渲染性能和准确性的重要实践。当您看到类似的控制台警告时，通常就是因为忘记了为列表项添加 `:key`属性。在实际开发中，我会确保遵守这个最佳实践，以避免潜在的问题，并提升应用的性能。

Console warning: component lists rendered with v-for should have explicit keys

在 Vue Composition API 中使用 Axios 发起请求通常涉及到几个步骤：安装 Axios，设置响应式数据，创建一个请求函数，并在合适的生命周期钩子中调用这个函数。

下面是一个具体的例子，展示了如何在 Vue Composition API 中使用 Axios 发起一个 GET 请求：

首先，确保你已经安装了 Axios。如果还没有安装，可以使用 npm 或 yarn 来进行安装：

```sh
npm install axios
# 或者
yarn add axios
```

然后，可以在 Vue 组件中使用 `setup` 函数来定义响应式数据和方法。这里是一个示例代码：

```javascript
<template>
  <div>
    <div v-if="error">请求失败：{{ error }}</div>
    <div v-else-if="data">
      
      <div>{{ data.title }}</div>
    </div>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null); // 用于存放请求结果的响应式数据
    const error = ref(null); // 用于存放可能出现的错误信息
    const loading = ref(false); // 用于表示请求是否正在进行中

    // 定义请求函数
    const fetchData = async () => {
      loading.value = true;
      error.value = null; // 每次请求前重置错误信息
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
        data.value = response.data; // 如果请求成功，更新 data
      } catch (e) {
        error.value = e.message; // 如果请求失败，更新 error
      } finally {
        loading.value = false; // 无论成功还是失败，请求结束后更新 loading 状态
      }
    };

    // 在组件挂载后立即发起请求
    onMounted(() => {
      fetchData();
    });

    // 返回响应式数据，供模板访问
    return {
      data,
      error,
      loading
    };
  }
};
</script>
```

在上面的示例中，我们首先定义了三个响应式变量：`data` 用于存储请求到的数据，`error` 用于存储可能发生的错误信息，`loading` 用于表示请求是否正在进行。然后定义了一个名为 `fetchData` 的异步函数，负责使用 Axios 发起 GET 请求。在 `onMounted` 生命周期钩子中调用此函数以确保组件挂载后立即发起数据请求。最后，我们将响应式变量通过 `setup` 函数的返回值暴露给模板，以便在模板中进行数据绑定和显示状态信息。

以上就是在 Vue Composition API 中使用 Axios 发起请求的基本流程和示例。

How to use Axios with Vue 3 Composition API

在Vue中，如果想要通过`watch`监听Vuex中存储的值，你可以使用计算属性(computed properties)结合侦听器(watchers)来实现。Vuex的状态变化是响应式的，这意味着你可以简单地在计算属性中返回Vuex的状态，并在`watch`选项中侦听这个计算属性的变化。

以下是一个具体的例子：

假设你有一个Vuex store，里面存有一个状态叫做`count`。

```javascript
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
```

你想要在Vue组件中监听`count`值的变化。你可以这样做：

```javascript
new Vue({
  el: '#app',
  store,
  computed: {
    // 使用计算属性来获取Vuex里的状态
    count() {
      return this.$store.state.count;
    }
  },
  watch: {
    // 使用侦听器来监听计算属性的变化
    count(newVal, oldVal) {
      console.log(`count值从${oldVal}变化到${newVal}`);
      // 这里可以根据count值的变化执行一些操作
    }
  }
});
```

在这个例子中，计算属性`count`用来从Vuex获取当前的`count`状态。然后，我们在组件的`watch`选项中定义了一个`count`侦听器，该侦听器将会在计算属性`count`的值变化时触发。这样，每当通过Vuex的mutation改变`count`状态时，计算属性会自动更新，进而触发侦听器中的回调函数。

此外，如果你想要深度监听一个对象的属性变化，可以在`watch`选项中设置`deep: true`，但对于大多数监听单一值的场景，如上述的`count`，这是不必要的。

举例来说，您有一篮子水果，每次从篮子中添加或删除水果时，您希望 (1) 显示有关水果数量的信息，**但**您还 (2) 希望收到以下通知以某种奇特的方式计算水果的数量......

_水果计数组件.vue_

    <template>
      
      
      <p>Fruits: {{ count }}</p>
    </template>
    
    <script>
    import basket from '../resources/fruit-basket'
    
    export default () {
      computed: {
        count () {
          return basket.state.fruits.length
          // Or return basket.getters.fruitsCount
          // (depends on your design decisions).
        }
      },
      watch: {
        count (newCount, oldCount) {
          // Our fancy notification (2).
          console.log(`We have ${newCount} fruits now, yay!`)
        }
      }
    }
    </script>
    

请注意，对象中函数的名称`watch`必须与对象中函数的名称匹配`computed`。在上面的示例中，名称是`count`。

监视属性的新值和旧值将作为参数传递给监视回调（计数函数）。

篮子店可能看起来像这样：

_水果篮.js_

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const basket = new Vuex.Store({
      state: {
        fruits: []
      },
      getters: {
        fruitsCount (state) {
          return state.fruits.length
        }
      }
      // Obviously you would need some mutations and actions,
      // but to make example cleaner I'll skip this part.
    })
    
    export default basket
    

您可以在以下资源中阅读更多内容：

*   [计算属性和观察者](https://v2.vuejs.org/v2/guide/computed.html)
*   [API 文档：计算的](https://v2.vuejs.org/v2/api/#computed)
*   [API 文档：观看](https://v2.vuejs.org/v2/api/#watch)

很简单：

    watch: {
      '$store.state.drawer': function() {
        console.log(this.$store.state.drawer)
      }
    }
    

如果商店位于模块中，请使用：

    '$store.state.myModule.drawer'
    

对于嵌套文件，请使用：

    '$store.state.fileOne.fileTwo.myModule.drawer'

您不应该使用组件的观察者来监听状态更改。我建议您使用 getters 函数，然后将它们映射到您的组件中。

    import { mapGetters } from 'vuex'
    
    export default {
      computed: {
        ...mapGetters({
          myState: 'getMyState'
        })
      }
    }
    

在您的商店中：

    const getters = {
      getMyState: state => state.my_state
    }
    

您应该能够通过`this.myState`在组件中使用来监听对商店所做的任何更改。

[https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper](https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper)

**如上所述，直接在商店中查看变化并不是一个好主意**

_但在一些非常罕见的情况下，它可能对某人有用，所以我会留下这个答案。其他情况请参阅@gabriel-robert 的回答_

您可以通过`state.$watch`. 将其添加到`created`组件中的（或需要执行此操作的位置）方法中

    this.$store.watch(
        function (state) {
            return state.my_state;
        },
        function () {
            //do something on data change
        },
        {
            deep: true //add this if u need to watch object properties change etc.
        }
    );
    

更多详细信息： https: [//vuex.vuejs.org/api/#watch](https://vuex.vuejs.org/api/#watch)

我认为提问者想将 watch 与 Vuex 一起使用。

    this.$store.watch(
          (state)=>{
            return this.$store.getters.your_getter
          },
          (val)=>{
           //something changed do something
    
          },
          {
            deep:true
          }
          );

How to watch store values from vuex

在Vue.js中，实现页面重定向通常涉及使用Vue Router，它是Vue.js的官方路由管理器。Vue Router允许你定义页面路由、导航、嵌套路由等。下面是几种在Vue应用中实现页面重定向的方法：

### 1. 在路由配置中使用 `redirect`

在Vue Router的路由配置中，你可以指定一个路由规则以`redirect`字段来重定向到另一个路由。

```javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
    // 当用户访问/a时，页面会重定向到/b
  ]
})
```

### 2. 在组件内使用编程式导航

你可以在Vue组件的方法中使用路由实例的`push`或`replace`方法来实现页面导航。

```javascript
this.$router.push('/target-page'); // 将用户导航到目标页面，相当于点了一个链接
// 或者
this.$router.replace('/target-page'); // 替换当前的历史记录条目
```

### 3. 使用导航守卫进行重定向

Vue Router提供了全局和路由独享的导航守卫，你可以在这些守卫中进行重定向。

```javascript
router.beforeEach((to, from, next) => {
  if (to.path === '/a') {
    next('/b'); // 如果用户要访问/a，那么重定向到/b
  } else {
    next(); // 否则，正常导航
  }
});
```

### 4. 使用`<router-link>`进行声明式导航

虽然`<router-link>`主要是用于声明式导航的，也可以用来触发重定向。

```html
<router-link to="/target-page">Go to Target Page</router-link>
```

设置了重定向的路由规则后，点击这个链接将会让应用导航到`/target-page`。

### 示例

假设你有一个登录页面，用户登录成功后需要重定向到首页。你可以在登录方法中使用编程式导航来实现：

```javascript
// Login.vue
export default {
  methods: {
    login() {
      // 登录逻辑...
      if (/* 登录成功 */) {
        this.$router.push('/home'); // 重定向到首页
      }
    }
  }
}
```

重定向是单页应用中常用的功能，Vue Router 提供了灵活的方式来实现不同场景下的页面跳转。在实际应用中，你可能需要结合实际的业务逻辑来选择最合适的重定向方式。

如果您使用的是[Vue Router](https://router.vuejs.org/)，则可以用于`router.push(path)`以编程方式导航到任何特定路线（请注意，这是`router.go(path)`Vue 2 之前的版本）。

`$router`可以从Vue 实例上的属性访问路由器本身，这意味着您可以`push`使用`this.$router.push(path)`.

您还可以使用对象语法进行更多控制，包括导航到预配置的[命名路由](https://router.vuejs.org/guide/essentials/named-routes.html)。从[文档](https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location)中：

>     // object
>     router.push({ path: 'home' })
>     
>     // named route
>     router.push({ name: 'user', params: { userId: '123' } })
>     
>     // with query, resulting in /register?plan=private
>     router.push({ path: 'register', query: { plan: 'private' } })
>     
>     // with hash, resulting in /about#team
>     router.push({ path: '/about', hash: '#team' })
>     

除了 Vue 路由器之外，`window.location.href = 'some url';`它也适用于非单页应用程序。

* * *

如果您正在寻找更永久的_重定向_，而不仅仅是编程导航，例如将所有`example.com/foo`点击重定向到`example.com/bar`，那么您应该使用[Vue Router 的重定向或别名功能](https://router.vuejs.org/guide/essentials/redirect-and-alias.html)。

### 重定向

[重定向](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect)位于路由配置中，让你告诉 Vue Router 始终将给定路径重定向到其他地方，例如导航到`/foo`会将你弹回`/bar`：

    const routes = [{ path: '/foo', redirect: '/bar' }];
    

这些路径也可以是动态的，例如：

    const routes = [{ path: '/foo/:subPath*', redirect: '/bar/:subPath*' }];
    // example.com/foo/profile?id=123 --> example.com/bar/profile?id=123
    

### 别名

[别名](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#alias)就像重定向一样，将流量从一个位置路由到另一个位置，**但它们不会更改用户的 URL**。这允许您将 UI 结构的任意部分映射到您想要的任何路径，从而提供更大的灵活性。

从文档中：

>     const routes = [
>       {
>         path: '/users',
>         component: UsersLayout,
>         children: [
>           // this will render the UserList component for these 3 URLs:
>           // - /users
>           // - /users/list
>           // - /people
>           { path: '', component: UserList, alias: ['/people', 'list'] },
>         ],
>       },
>     ]
>

根据文档，router.push 似乎是首选方法：

> 要导航到不同的 URL，请使用 router.push。此方法将新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。

来源： https: [//router.vuejs.org/en/essentials/navigation.html](https://router.vuejs.org/en/essentials/navigation.html)

仅供参考：Webpack 和组件设置，单页应用程序（通过 Main.js 导入路由器），我必须通过以下方式调用路由器函数：

    this.$router
    

示例：如果您想在满足条件后重定向到名为“Home”的路线：

    this.$router.push('Home')

当在组件脚本标签内时，您可以使用路由器并执行类似的操作

    this.$router.push('/url-path')

如果你想路由到另一个页面使用这个

    this.$router.push({path: '/pagename'});
    

如果你想使用参数路由到另一个页面，请使用这个

    this.$router.push({
      path: '/pagename', 
      params: {
        param1: 'value1', 
        param2: 'value2'
      }
    });

How to achieve redirection to another page in vue. Js

在 Vue.js 中，`v-on` 指令用于监听 DOM 事件，例如用户的点击事件。当您在原生 HTML 元素上使用 `v-on:click` 或者是缩写形式 `@click`，它会正常工作，因为这会在该元素上绑定一个点击事件监听器。但是，当您将同样的指令用在一个 Vue 组件上时，情况就有所不同。

组件上的 `v-on` 监听器并不是直接监听子组件根元素的原生事件，而是监听由子组件触发的自定义事件。Vue 组件实例不会自动将它们的事件监听器作为原生 DOM 事件处理程序。这是因为组件的根元素可以是任何元素或者其他组件，Vue 不会对它做特殊处理。

如果你要在组件上监听一个原生事件（比如点击事件），你需要使用 `.native` 修饰符，指示 `v-on` 监听原生事件，如下所示：

```vue

<template>
  <button @click="$emit('click')">Click me</button>
</template>
<script>
export default {
  emits: ['click']
};
</script>
```

```vue

<template>
  <my-component @click.native="handleClick"></my-component>
</template>
<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!');
    }
  }
};
</script>
```

在这个例子中，我们有一个子组件 `MyComponent`，它在一个按钮上监听点击事件，并在点击时触发一个名为 `click` 的自定义事件。在父组件中，我们使用 `.native` 修饰符来监听这个原生的点击事件。但是要注意的是，从 Vue 3 开始，`.native` 修饰符已被移除，因为 Vue 3 提倡组件应该显式地定义和触发它们自己的自定义事件。

因此，在 Vue 3 中，您应该在子组件中通过 `$emit` 来显式地发出自定义事件，并在父组件中监听这些事件而不是原生事件。如果你确实需要在父组件中监听子组件根元素的原生事件，你应该在子组件内部绑定一个原生事件监听器，并在需要时触发一个自定义事件。

如果你想监听组件根元素上的原生事件，你必须使用[.native](https://v2.vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events)修饰符`v-on`，如下所示：

    <template>
      <div id="app">
        <test v-on:click.native="testFunction"></test>
      </div>
    </template>
    

或者简而言之，正如评论中所建议的，您也可以这样做：

    <template>
      <div id="app">
        <test @click.native="testFunction"></test>
      </div>
    </template>
    

[参考阅读有关**本机事件的更多信息**](https://v2.vuejs.org/v2/guide/migration.html#Listening-for-Native-Events-on-Components-with-v-on-changed)

我认为该`$emit`功能更适合您的要求。它将您的组件与 Vue 实例分开，以便它可以在许多上下文中重用。

    
    <template>
      <div id="app">
        <test @click="$emit('test-click')"></test>
      </div>
    </template>
    

在 HTML 中使用它：

    
    <test @test-click="testFunction">

这是[@Neps 的答案](https://stackoverflow.com/a/50995368/10895487)，但有详细信息。

* * *

**注意**：如果您不想修改组件或无权访问它，[@Saurabh 的答案更合适。](https://stackoverflow.com/a/41476882/10895487)

* * *

为什么@click 不能正常工作？
=================

组件很复杂。一个组件可以是一个小型的精美按钮包装器，另一个组件可以是内部有一堆逻辑的整个表格。Vue 不知道绑定`v-model`或使用时您到底期望什么`v-on`，因此所有这些都应该由组件的创建者处理。

如何处理点击事件
========

根据[Vue 文档](https://v2.vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events)，`$emit`将事件传递给父级。文档中的示例：

**主文件**

    <blog-post
      @enlarge-text="onEnlargeText"
    />
    

**成分**

    <button @click="$emit('enlarge-text')">
      Enlarge text
    </button>
    

（`@`是`v-on` [简写](https://v2.vuejs.org/v2/guide/syntax.html#v-on-Shorthand)）

组件处理本机`click`事件并发出父级事件`@enlarge-text="..."`

`enlarge-text`可以替换为`click`使其看起来像我们正在处理本机点击事件：

    <blog-post @click="onEnlargeText">
      Enlarge text
    </blog-post>
    
    
    <button @click="$emit('click')">
      Enlarge text
    </button>
    

但这还不是全部。`$emit`允许通过事件传递特定值。在native的情况下`click`，值为[MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)（与Vue无关的JS事件）。

Vue 将该事件存储在`$event`变量中。因此，最好`$event`与事件一起发出，以营造本机事件使用的印象：

    <button v-on:click="$emit('click', $event)">
      Enlarge text
    </button>

正如 Chris Fritz（Vue.js[核心团队荣誉退休人员](https://v2.vuejs.org/v2/guide/team.html)）在[VueCONF US 2019中提到的](https://www.youtube.com/watch?v=b554XmaTWrw&t=646)

> 如果我们让 Kia 输入`.native`，然后基本输入的根元素从输入更改为标签，突然该组件被破坏并且不明显，事实上，除非您有一个非常好的测试，否则您甚至可能无法立即捕获它。相反，通过避免使用**我目前认为是反模式并将在 Vue 3 中删除的**`.native`修饰符，您将能够显式定义父级可能关心添加到哪些元素侦听器...

使用 Vue 2
========

使用`$listeners`：
---------------

因此，如果您使用 Vue 2，解决此问题的更好选择是使用**完全透明的包装器**逻辑。为此，Vue 提供了一个`$listeners`属性，其中包含组件上使用的侦听器对象。例如：

    {
      focus: function (event) { /* ... */ }
      input: function (value) { /* ... */ },
    }
    

然后我们只需要添加`v-on="$listeners"`到组件中`test`，例如：

**Test.vue（子组件）**

    <template>
      <div v-on="$listeners">
        click here
      </div>
    </template>
    

现在该`<test>`组件是一个**完全透明的包装器**，这意味着它可以像普通元素一样使用`<div>`：所有侦听器都可以工作，无需`.native`修饰符。

**演示：**

    Vue.component('test', {
      template: `
        <div class="child" v-on="$listeners">
          Click here
        </div>`
    })
    
    new Vue({
      el: "#myApp",
      data: {},
      methods: {
        testFunction: function(event) {
          console.log('test clicked')
        }
      }
    })

    div.child{border:5px dotted orange; padding:20px;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
    <div id="myApp">
      <test @click="testFunction"></test>
    </div>

运行代码片段Hide results

展开片段

使用[`$emit`](https://v2.vuejs.org/v2/api/#vm-emit)方法：
----------------------------------------------------

我们也可以使用该`$emit`方法来实现此目的，这有助于我们在父组件中监听子组件的事件。为此，我们首先需要从子组件发出[自定义事件，例如：](https://v2.vuejs.org/v2/guide/components-custom-events.html#ad)

**Test.vue（子组件）**

    <test @click="$emit('my-event')"></test>
    

**重要提示：**始终使用短横线命名的事件名称。有关这一点的更多信息和演示，请查看此答案：[VueJS将计算值从组件传递到父级](https://stackoverflow.com/a/61693165/1823841)。

现在，我们只需要在父组件中监听这个发出的自定义事件，例如：

**应用程序.vue**

    <test @my-event="testFunction"></test>
    

所以基本上，我们将简单地使用or 来代替or 的`v-on:click`简写。`@click``v-on:my-event``@my-event`

**演示：**

    Vue.component('test', {
      template: `
        <div class="child" @click="$emit('my-event')">
          Click here
        </div>`
    })
    
    new Vue({
      el: "#myApp",
      data: {},
      methods: {
        testFunction: function(event) {
          console.log('test clicked')
        }
      }
    })

    div.child{border:5px dotted orange; padding:20px;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
    <div id="myApp">
      <test @my-event="testFunction"></test>
    </div>

运行代码片段Hide results

展开片段

* * *

使用 Vue 3
========

使用`v-bind="$attrs"`：
--------------------

Vue 3 将从很多方面让我们的生活变得更加轻松。一个例子是，它将帮助我们创建一个**更简单的透明包装器**，配置更少，只需使用`v-bind="$attrs"`. 通过在子组件上使用它，我们的侦听器不仅可以直接从父组件工作，而且任何其他属性也将像普通的`<div>`.

因此，对于这个问题，我们不需要更新 Vue 3 中的任何内容，您的代码仍然可以正常工作，就像`<div>`这里的根元素一样，它将自动侦听所有子事件。

**演示#1：**

    const { createApp } = Vue;
    
    const Test = {
      template: `
        <div class="child">
          Click here
        </div>`
    };
    
    const App = {
      components: { Test },
      setup() {
        const testFunction = event => {
          console.log("test clicked");
        };
        return { testFunction };
      }
    };
    
    createApp(App).mount("#myApp");

    div.child{border:5px dotted orange; padding:20px;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
    <div id="myApp">
      <test v-on:click="testFunction"></test>
    </div>

运行代码片段Hide results

展开片段

但是，对于具有嵌套元素的复杂组件，我们需要将属性和事件应用于而`<input />`不是父标签，我们可以简单地使用`v-bind="$attrs"`

**演示#2：**

    const { createApp } = Vue;
    
    const BaseInput = {
      props: ['label', 'value'],
      template: `
        <label>
          {{ label }}
          <input v-bind="$attrs">
        </label>`
    };
    
    const App = {
      components: { BaseInput },
      setup() {
        const search = event => {
          console.clear();
          console.log("Searching...", event.target.value);
        };
        return { search };
      }
    };
    
    createApp(App).mount("#myApp");

    input{padding:8px;}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
    <div id="myApp">
      <base-input 
        label="Search: "
        placeholder="Search"
        @keyup="search">
      </base-input><br/>
    </div>

运行代码片段Hide results

展开片段

有点冗长，但这就是我的做法：

`@click="$emit('click', $event)"`  
  

**更新：** @sparkyspider 添加的示例

    <div-container @click="doSomething"></div-container>
    

在`div-container`组件...

    <template>
      <div @click="$emit('click', $event);">The inner div</div>
    </template>

Why v- on :click does not work on a vue component?

在Vue组件中将外部JavaScript脚本添加到组件中通常有以下几种方式：

### 1. 使用`<script>`标签在`index.html`中直接引入

在Vue项目的入口文件`index.html`中，可以直接在`<head>`标签或者`<body>`标签的底部添加`<script>`标签来引入外部脚本。

```html

<script src="https://example.com/some-external-script.js"></script>
```

这种方式的好处是全局只加载一次，所有组件都可以访问到该脚本提供的功能，但缺点是不论组件是否需要该脚本，它都会被加载。

### 2. 动态加载使用`import()`

可以在组件内使用JavaScript的动态导入（`import()`），这样可以在需要的时候才加载和解析脚本，还支持模块化的代码。

```javascript
// Vue组件内
export default {
  name: 'MyComponent',
  mounted() {
    import('path-to-external-script')
      .then(module => {
        // 使用加载的脚本
        module.someFunction();
      })
      .catch(err => {
        console.error('Failed to load the external script', err);
      });
  }
};
```

使用动态导入可以更好地控制脚本加载的时机，实现按需加载，优化性能。

### 3. 使用第三方库

有时外部脚本可能是一个第三方库，可以通过npm或yarn这样的包管理器来安装，并在组件中以模块的方式导入。

```bash
npm install some-external-library
# 或者
yarn add some-external-library
```

然后在Vue组件中导入使用：

```javascript
// Vue组件内
import someLibrary from 'some-external-library';

export default {
  name: 'MyComponent',
  mounted() {
    someLibrary.someFunction();
  }
};
```

### 4. 使用Vue插件

如果外部脚本是一个Vue插件，可以在Vue实例创建之前使用`Vue.use()`来注册插件。

```javascript
import Vue from 'vue';
import SomePlugin from 'some-vue-plugin';

Vue.use(SomePlugin);

new Vue({
  // ... 配置项
});
```

注册插件后，通常可以在所有的Vue组件中使用该插件提供的功能。

### 5. 动态创建`<script>`标签

有时，你可能需要在组件的生命周期钩子中动态创建并添加`<script>`标签。

```javascript
export default {
  name: 'MyComponent',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/some-external-script.js';
    script.onload = () => {
      // 脚本加载完成后执行的操作
    };
    document.body.appendChild(script);
  }
};
```

这种方法允许你在组件的生命周期内控制脚本的加载，但需要注意清理，防止内存泄露，如在组件销毁时移除创建的script标签。

### 总结

选择哪种方法取决于你的具体需求，如全局可用性、按需加载、依赖管理等。在实际开发中，推荐根据项目的结构和需求来合理安排资源的加载方式。

解决此问题的一个简单有效的方法是将外部脚本添加到`mounted()`组件的 vue 中。我将用[Google Recaptcha](https://www.google.com/recaptcha/intro/)脚本向您说明：

    <template>
       .... your HTML
    </template>
    
    <script>
      export default {
        data: () => ({
          ......data of your component
        }),
        mounted() {
          let recaptchaScript = document.createElement('script')
          recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
          document.head.appendChild(recaptchaScript)
        },
        methods: {
          ......methods of your component
        }
      }
    </script>
    

来源： https: [//medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8](https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8)

我下载了一些带有自定义 js 文件和 jquery 的 HTML 模板。我必须将这些 js 附加到我的应用程序中。并继续使用 Vue。

在这种情况下，这个包非常适合我 [https://www.npmjs.com/package/vue-plugin-load-script](https://www.npmjs.com/package/vue-plugin-load-script)

    // local files
    // you have to put your scripts into the public folder. 
    // that way webpack simply copy these files as it is.
    Vue.loadScript("/js/jquery-2.2.4.min.js")
    
    // cdn
    Vue.loadScript("https://maps.googleapis.com/maps/api/js")

使用 webpack 和 vue loader 你可以做这样的事情

它在创建组件之前等待外部脚本加载，因此 globar vars 等在组件中可用

    components: {
     SomeComponent: () => {
      return new Promise((resolve, reject) => {
       let script = document.createElement('script')
       script.onload = () => {
        resolve(import(someComponent))
       }
       script.async = true
       script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
       document.head.appendChild(script)
      })
     }
    },

更新：这在 Vue 3 中不再有效。您将收到此错误：

> VueCompilerError：具有副作用（ 和 ）的标签在客户端组件模板中被忽略。

* * *

**如果您尝试将外部 js 脚本嵌入到 vue.js 组件模板中，请按照以下步骤操作：**

我想向我的组件添加**外部 JavaScript 嵌入代码，**如下所示：

    <template>
      <div>
        This is my component
        <script src="https://badge.dimensions.ai/badge.js"></script>
      </div>
    <template>
    

Vue 向我展示了这个错误：

> 模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如 ，因为它们不会被解析。

* * *

**我解决这个问题的方法是添加`type="application/javascript"`**（[请参阅此问题以了解有关 js 的 MIME 类型的更多信息](https://stackoverflow.com/questions/189850/what-is-the-javascript-mime-type-for-the-type-attribute-of-a-script-tag)）：

`<script type="application/javascript" defer src="..."></script>`

* * *

_您可能会注意到该`defer`属性。如果您想了解更多信息，请观看[Kyle 的视频](https://www.youtube.com/watch?v=BMuFBYw91UQ)_

这可以简单地像这样完成。

      created() {
        var scripts = [
          "https://cloudfront.net/js/jquery-3.4.1.min.js",
          "js/local.js"
        ];
        scripts.forEach(script => {
          let tag = document.createElement("script");
          tag.setAttribute("src", script);
          document.head.appendChild(tag);
        });
      }

How to add external js scripts to vuejs components

在 Vue.js 中，computed 计算属性本身是不可以直接接受参数的。计算属性被设计为基于它们的依赖进行缓存的属性，意味着它们只能访问组件的响应式数据，并在这些响应式数据变化时重新计算。由于计算属性在内部是基于它们的依赖进行缓存的，因此它们没有办法接收参数来动态决定如何计算值。

如果你需要类似于传递参数给计算属性的功能，通常有两种替代方案：

1. **方法 (methods)**: 你可以使用一个方法来接收参数并返回计算后的值，而不是使用计算属性。不过，请注意，与计算属性不同，方法不会缓存结果，每次重新渲染时都会执行。

2. **使用方法返回一个函数**: 另一个变通的办法是你可以定义一个方法，该方法返回一个函数，然后这个函数可以作为计算属性那样使用，并接受参数进行计算。虽然这个函数不会被缓存，但是你可以在这个函数内部使用计算属性或其他缓存的值。

这里有一个简单的例子说明如何使用方法返回一个函数来模拟带参数的计算属性：

```vue
<template>
  <div>
    <p>Message with prefix: {{ computedWithParam('Hello, ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue'
    };
  },
  methods: {
    computedWithParam(prefix) {
      // 方法返回一个函数
      return (suffix) => {
        // 这个函数接受参数并返回处理结果
        return prefix + this.message + suffix;
      };
    }
  }
};
</script>
```

在这个例子中，`computedWithParam` 是一个方法，它返回了一个可以接受参数的函数，这个函数可以在模板中被调用，并传递实际的参数进去。

总的来说，尽管计算属性不支持传参，但你可以通过上述方法实现类似的功能。

Can i pass parameters in computed properties in vue js

Vue.js 通常是响应式的，当对应的数据变化时，Vue 会自动更新 DOM。然而，在某些情况下，你可能需要强制 Vue 组件重新渲染，即便其数据没有发生变化。以下是几种可以实现强制重新渲染的方法：

### 1. 使用 `key` 属性

在 Vue 中，你可以通过改变一个组件的 `key` 属性来强制其重新渲染。`key` 属性是 Vue 的一个特殊属性，用于跟踪节点的身份，这可以用于强制重新渲染组件。

```vue
<template>
  <your-component :key="componentKey"></your-component>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    reloadComponent() {
      this.componentKey += 1;
    }
  }
};
</script>
```

在上述例子中，每当你调用 `reloadComponent` 方法时，`componentKey` 的值都会增加，这将会导致 `your-component` 重新创建和渲染。

### 2. 使用 `v-if` 指令

另一种方法是利用 `v-if` 指令来控制组件的渲染。你可以在一个变量上切换 `v-if` 的值，使组件先销毁，然后再重新创建。

```vue
<template>
  <your-component v-if="isComponentVisible"></your-component>
</template>

<script>
export default {
  data() {
    return {
      isComponentVisible: true,
    };
  },
  methods: {
    reloadComponent() {
      this.isComponentVisible = false;
      this.$nextTick(() => {
        this.isComponentVisible = true;
      });
    }
  }
};
</script>
```

在这个例子中，`reloadComponent` 方法首先将 `isComponentVisible` 设置为 `false`，这会导致组件被销毁。然后，使用 `$nextTick` 方法等待 Vue 完成 DOM 更新，在回调函数中将 `isComponentVisible` 设置回 `true`，重新渲染组件。

### 3. 使用 `forceUpdate`

虽然不是最推荐的方法，因为它违背了 Vue 的响应式原则，但你也可以使用 Vue 实例的 `forceUpdate` 方法来强制更新视图。

```javascript
this.$forceUpdate();
```

这将会导致组件内的所有子组件也会进行重新渲染。需要注意的是，过度使用 `$forceUpdate` 可能会导致性能问题，因为它绕过了 Vue 的响应式系统。

总之，通常建议尽量避免强制重新渲染组件，而是寻找更符合 Vue 响应式原理的解决办法。只有在特定情况下，当其他方法行不通时，才使用上述提到的方法。

试试这个魔法咒语：

    vm.$forceUpdate();
    //or in file components
    this.$forceUpdate();
    

无需创建任何悬挂变量:)

**更新：**当我刚开始使用 VueJS 时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我记得，有一段时间我摆脱了它，只是将所有无法自动刷新的属性（主要是嵌套属性）放入计算属性中。

更多信息请参见：[https ://v2.vuejs.org/v2/guide/compulated.html](https://v2.vuejs.org/v2/guide/computed.html)

这似乎是[matthiasg](https://github.com/matthiasg)关于[这个问题](https://github.com/vuejs/Discussion/issues/356)的一个非常干净的解决方案：

> `:key="someVariableUnderYourControl"`当您想要完全重建组件时，您还可以使用和更改密钥

对于我的用例，我将 Vuex getter 作为 prop 提供给组件。Vuex 会以某种方式获取数据，但反应性不会可靠地启动以重新渲染组件。就我而言，将组件设置`key`为 prop 上的某个属性可以保证在 getter（和属性）最终解析时刷新。

请阅读此 [http://michaelnthiessen.com/force-re-render/](http://michaelnthiessen.com/force-re-render/)

> 可怕的方法：重新加载整个页面  
> 可怕的方法：使用 v-if hack  
> 更好的方法：**使用 Vue 的内置 forceUpdate 方法**  
> 最好的方法：**在组件上更改键**  

    <template>
       <component-to-re-render :key="componentKey" />
    </template>
    
    <script>
     export default {
      data() {
        return {
          componentKey: 0,
        };
      },
      methods: {
        forceRerender() {
          this.componentKey += 1;  
        }
      }
     }
    </script>
    

在某些情况下我也使用 watch: 。

尝试使用`this.$router.go(0);`手动重新加载当前页面。

How to  force  reload/ re - render  in Vue. Js

`v-model` 和 `v-bind` 是 Vue 中的两个指令，它们在功能上有所不同：

### `v-model`

`v-model` 是 Vue 的一个指令，用于在表单输入元素和应用状态之间创建双向数据绑定。这意味着，当您在输入框中输入内容时，绑定的数据会自动更新；同样，当更新了绑定的数据时，输入框内的内容也会自动更新。

**用途**：通常用于表单控件如 `<input>`, `<select>`, `<textarea>` 等。

**示例**：

```html
<template>
  <input v-model="message" placeholder="输入一些文字">
  <p>输入的消息是： {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>
```

在这个例子中，`v-model` 将 input 的值和 data 中的 `message` 属性进行了双向绑定。当用户在输入框中键入时，`message` 属性的值会更新；同样，如果通过其他方式更改了 `message` 的值，输入框也会显示最新的内容。

### `v-bind`

`v-bind` 是 Vue 的一个指令，用于单向绑定父组件的数据到子组件的属性上。它通常用来动态设置 HTML 元素的属性或子组件的 prop。

**用途**：在处理任何 HTML 属性或组件 prop 的单向绑定时使用。

**示例**：

```html
<template>
  <div>
    <img v-bind:src="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/image.jpg'
    };
  }
};
</script>
```

在这个例子中，`v-bind` 将 img 标签的 src 属性绑定到 Vue 实例的 data 中的 `imageSrc` 属性上。当 `imageSrc` 的值发生变化时，img 的 src 属性会自动更新以反映这一变化。但这种绑定是单向的，即 img 的变化不会影响到 `imageSrc` 的值。

### 区别总结

- **数据流向**：`v-model` 是双向绑定，而 `v-bind` 是单向绑定。
- **用途**：`v-model` 主要用于表单元素，而 `v-bind` 适用于绑定 HTML 属性和组件的 props。
- **语法简洁性**：`v-model` 直接写在指令上，而 `v-bind` 后通常需要指定具体的属性，例如 `v-bind:src`、`v-bind:class` 等。在简写形式中，`v-bind` 可以直接使用冒号(`:`)，如 `:src="imageSrc"`。

理解这两个指令的不同用途和工作方式对于有效地使用 Vue 来构建交互式界面是非常重要的。

Vue相关问题

Enclosing a router-link tag in a button in vuejs