Vue：el与data的两种写法

el 的两种写法

1、内联写法

Vue 实例中声明 el 属性来指定它所挂载的元素

    <div id="app"></div> 
    <script>
        new Vue({
            el: '#app' //使用 el 属性将 Vue 实例挂载到 id 为 "app" 的元素上
        })

    </script>

2、外部写法

使用 $mount() 方法来挂载 Vue 实例到指定元素上 

    <div id="app"></div>
    <script>
        const vm = new Vue({}) 
        vm.$mount('#app') 
    </script>

data 的两种写法

data 是 Vue 实例的状态管理器，它包含了 Vue 实例中的所有数据。在 Vue 中，我们同样可以使用两种方式来声明 data：对象形式和函数形式。

1、对象形式

对象形式是最简单的声明 data 的方式，它直接使用一个对象来存储所有数据 

    <div id="app">{{name}}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: '你好'
            }
        }) 
    </script>

 优点

• 对象形式的data比较简单，适用于小型应用程序。
• 不需要额外的逻辑处理，可以在Vue实例中直接声明数据。

缺点

• 对象形式的data不能进行太多的逻辑处理，不适用于大型应用程序。
• 如果多个实例共享同一个数据对象，可能会出现数据污染的问题。

2、函数形式

函数形式是一种更高级的声明 data 的方式，它可以用于管理大型应用程序的状态。函数形式的 data 接受一个函数作为参数，并返回一个对象，可以在其中声明所有数据。例如： 

    <div id="app">{{name}}</div>
    <script>
        new Vue({
            el: '#app',
            data() {
                console.log(this);//此处this是Vue实例对象
                return {
                    name: '文哥你好'
                }
            }
        }) 
    </script>

优点

• 函数形式的data允许我们在声明数据时进行更多的逻辑处理，例如计算属性、监听器等。
• 可以避免多个实例共享同一个数据对象的问题，从而提高应用程序的可维护性和可扩展性。

缺点

• 函数形式的data比较复杂，需要更多的代码来实现。
• 在每次实例化时都会执行，可能会影响性能。

一个重要的原则

由Vue管理的函数，,一定不要写箭头函数，否则 this 就不再是Vue实例了

    <div id="app">{{name}}</div>
    <script>
        new Vue({
            el: '#app',
            data: () => {
                console.log("data实例中的this", this);//此处this是Window实例对象
                return {
                    name: '你好'
                }
            }
        }) 
    </script>