Vue的响应式基础

发布于:2024-12-23 ⋅ 阅读:(11) ⋅ 点赞:(0)

1.SetUp

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

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

特点如下:

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

setup中访问thisundefined

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 的返回值

1.若返回一个对象:则对象中的属性、方法等,在模板中均可以直接使用重点关注)。

2.若返回一个函数:则可以自定义渲染内容,代码如下:

setup(){

      return ()=>'你好啊!'

}

setup 语法糖

setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去,代码如下:

<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>

 2.响应式基础