Vue的响应式基础

  https://cn.vuejs.org/api/composition-api-setup.html#basic-usage

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

特点如下：

setup函数返回的对象中的内容，可直接在模板中使用。

setup中访问this是undefined。

setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

<template>

  <div>

    <h2>姓名：{ {name}}</h2>

    <button @click="showName">显示名字</button>

  </div>

</template>

<script lang="ts">

  export default {

    setup(){

      // 数据，原来写在data中

      let name = '张三'

      // 方法，原来写在methods中

      function showName(){

        console.log(name)

      }

     //返回值：

      // 1.返回一个对象，对象中的内容，模板中可以直接使用

      return { name,showName}

      //2.返回一个函数，自定义渲染的内容

      return ()=>‘今天天气真好’

    }

  }

</script>

setup(){

      return ()=>'你好啊！'

}

<template>

  <div>

<h2>姓名：{ {name}}</h2>

<button @click="showName">显示名字</button>  

<button @click="changeName">修改名字</button>  

</div>

</template>

<!-- 下面的写法是setup语法糖 -->

<script setup lang="ts">

  console.log(this) //undefined

  // 数据

  let name = '张三'

  // 显示姓名方法

  function showName(){

     console.log(name)

  }

  //修改姓名方法

  function changeName(){

     name+='~'      

     console.log(name)   //数据进行修改，但是没有动态渲染到页面

  }

</script>