Vue面试系列之二：vue组件中data为什么是个函数？

最新推荐文章于 2022-09-26 08:48:19 发布

听北风

最新推荐文章于 2022-09-26 08:48:19 发布

阅读量260

点赞数

分类专栏： web 前端工程师 Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/jmsLU/article/details/119462184

版权

web 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端工程师

18 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

1. 问题分析

对于这个问题，大多数人可能都有所注意，但是却没有过多的在意，那么接下来我就来简单分析一下，希望各位读者能够有所收获。

首先，我们来分析一下这个data：

在我们初次接触vue的时候，我们大多都是在页面中引入vue.js，然后在页面中直接创建一个Vue根实例，代码如下：

<html>
<body>
    <div id='demon'>
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="./vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#demo",
        data:{
            msg:'Hello Vue!';
        }
})
</script>
</html>

这段代码相信接触过vue的朋友都很熟悉了，但这一次，我们需要将关注点放在data上。

此时的data就是一个对象，看起来没有丝毫问题，代码也没有报错，可以正常显示，我们接着往下分析。

当我们接触了vue组件化的概念之后，问题也就出现了：

<!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>Document</title>
    <script src="./vue/dist/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>vue组件data为什么必须是个函数？</h1>
        <comp></comp>
        <comp></comp>
    </div>
</body>
<script>
    // 这是一个自定义组件
    Vue.component('comp', {
        template: '<div @click="counter++">{{counter}}</div>',

        data() {
            return {
                counter: 1
            }
        }
    })
    const app = new Vue({
        el: "#demo",

    })
</script>

</html>

观察上述代码中的data，我们可以清楚的看到它（data）是一个函数，而且它的内部利用return返回了一个属性counter，也就是我们定义的属性，此时，页面可以正常显示，也无任何错误；

那么我们再来看：

<!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>Document</title>
    <script src="./vue/dist/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>vue组件data为什么必须是个函数？</h1>
        <comp></comp>
        <comp></comp>
    </div>
</body>
<script>
    Vue.component('comp', {
        template: '<div @click="counter++">{{counter}}</div>',
         data: {
             counter: 1
         }
  
    const app = new Vue({
        el: "#demo",

    })
</script>

上述代码中，我只是将data变了一下，从函数式变成了单纯的对象形式，此时，我们再来执行一下代码：

结果可期吖，就是报错，直接看箭头所指，很明显就是data出错了；

而对于vue单文件组件也是如此，在此简单提一下：

<script>
    export default {
        // 正确
        data(){
            return {
                msg:'Hello Vue!' 
            }
           
        }
        // 错误
        data:{
            msg:'Hello Vue!'
        }
    }
</script>

上段代码中，data也是一个函数，而我们定义的属性，则是通过return返回对象的方式来定义的。

好，通过对问题的简要分析，我们再来深究它到底是为什么如此？