vue2和vue3的js格式

vue2

<script >
  // export default 的作用是开放里定义的数据和方法
  export default {
    name:'App',
    // 和标签中绑定数据放在data(){}里
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    // 和标签中绑定方法放在methods(){}里,方法名前面不加function,访问变量需加this,不同函数要用逗号隔开
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
</script>

 

vue3的风格 

<script setup name="App">
  // 定义的数据和方法本就是开放的,无需export default 

    // 数据定义,非常直观: let 变量名 = ref(默认值)
    let name = ref('张三')
    let age = ref(18)
    let tel = ref('13888888888')

    // 方法名前面加function,函数内使用变量不用加this,使用数据要加.value
    
    function changeName(){
        name.value = 'zhang-san'
    }
    function changeAge(){
        age.value += 1
    }
    function showTel(){
        alert(tel.value)
    }
</script>