vue3 的基本语法

目录

先来一段简单的代码 

代码说明

 下篇文章会介绍如何让vue3的数据是响应式的

先来一段简单的代码 

<template>
  <div>
    <h2>{{this.name}}</h2>
    <button @click="ChangeName">change name</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
          name:'vue2' //定义name变量
    }
  },
  methods: {
   //定义修改变量的方法 
       ChangeName(){
           this.name = 'vue3'
       }
  },


};
</script>

<style lang="less" scoped>

</style>

代码说明

这是一个经典的vue2 的代码 ，在这个代码中，我们将name这个变量显示到页面，

通过changeName这个函数，对其进行了一个修改。在vue3中是完全支持这个语法的 

这个写法就是 optionApi

但是这个写法有一个弊端 ，新增或修改时，需要分别修改data methods computed等

不利于代码的维护

 在vue3中新增了一个叫setup的方法 setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

  

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <button @click='changeName'>change name</button>

  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'

      // 方法，原来写在methods中
      function changeName(){
        name = 'vue3' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,changeName}
    }
  }
</script>

这是vue3的写法 使Composition API 这种写法更加优雅和简洁 ，但是点击后发现页面数据无变化

经插件查看发现其不是响应式的。

 下篇文章会介绍如何让vue3的数据是响应式的