Vue中为什么data不是一个对象，而是一个函数？
当我们给data定义为一个函数时，点击某一个按钮，就会操作对应的组件，而且数据之间不会有影响。
当返回的data定义的是一个对象或者数组时，因为共用的是一个data数据时，所以我们点击不同的组件时，会发现每一个组件都在改变，导致数据污染。所以data是一个函数，因为每个data可以进行独立维护。
代码实现如下：
<template>
<div>
<button @click="numList++">+</button>
<span>Count: {{ numList }}</span>
<button @click="numList--">-</button>
</div>
</template>
<script>
export default {
data(): {
return {
numList: 0
}
}
}
</script>
<style>
</style>路由的懒加载
当我们使用下面这种方法实现路由懒加载，我们可以在路由中router文件夹下面的index.js文件用来存放路由， 我们可以直接引入路由，这样当我们打开项目后，控制台netWork面板会加载app.js文件，我们会发现这个文件较大，当我们切换路由到About.vue路由时，发现没有加载js文件，这是因为第一次进来时，已经将About.vue的js文件加载到app.js。
代码实现如下：
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/about', name: 'About', component: About }
]初次之外，我们还可以使用下面这种方式实现路由懒加载，当使用下面方法时，在路由懒加载时，我们进入页面控制台的network面板查看app.js，发现这个文件变小了，而且当我们切换到about路由页面时，会加载对应的about.js文件。路由懒加载只有当我们访问该路由的时候才会加载对应的js文件。这样就可以缩短首屏渲染时间。其中webpackChunkName是决定我们加载对应js的文件名字是什么。我这里写的about所以会加载出about.js。如果不写的话，加载就显示0.js文件。
代码实现如下：
Vue.use(VueRouter)
const routes = [
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */'../views/About.vue')
}
]v-for和v-if不一起使用？
我们在vue2中如果v-if 和 v-for一起使用时，首先会执行v-for，因为v-for的优先级高，从而会造成性能的损耗。为了解决这种损耗，我们可以使用v-for和v-if的嵌套功能，这样vue就会先判断v-if再去执行循坏。
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2中v-for和v-if不能连用?</title>
</head>
<body>
<div id="app">
<!-- vue2中v-for会比v-if优先执行 -->
<div v-if="flag">
<div v-for="(item, index) in colors">
{{item}}
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
colors: ['pink', 'black', 'yellow'],
flag: false
}
}
})
</script>
</body>
</html>上面代码中如果flag为false的时候，就不会执行循环了。但是我们在控制台可以看到外面会多了一层div标签，如果我们想要不多一层标签，可以将div修改为template标签就行。
注意：虽然vue3中v-if的优先级高于v-for，但是我们依然不建议在同一个标签上使用，如果想要使用，还是使用嵌套的方法。
