app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <button @click="change">点击看控台</button>
</template>

<script>

export default {
  name: 'App',
  setup(){//数据和方法都写在这个setup函数里面
    let name = 'xiaoxiao'
    let age = '23'
    function change(){
      console.log(1111111111)
    }
    // 必须要写返回的方法和函数的名字，不然不生效
    // 这种情况还不是响应式的还要加其它的东西
    return {
      name,
      age,
      change
    }
  }
}
</script>

不可改变name在模板的值，模板没有根据我们修改内容的几个发生响应式

let name = ref('xiaoxiao')
    function change(){
      this.name = 'wwwwwww'
      console.log(this.name)
      return name
    }

给要变化的数据用ref加工，这样模板就能响应数据的改变了，ref是一个构造函数，返回的是一个引用RefImpl实例对象

ref实例对象.PNG

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>{{name}}</h1>
  <h1>{{age}}</h1>
  <button @click="change">点击修改</button>
  <h1>学校名字：{{shool.name}}</h1>
  <h1>学校地址：{{shool.addr}}</h1>
</template>

<script>
import { ref } from '@vue/reactivity'

export default {
  name: 'App',
  setup(){//数据和方法都写在这个setup函数里面
    let name = ref('xiaoxiao')
    let age = '23'
    let shool = ref({
      name:'理工',
      addr:'上海'
    })
    function change(){
      console.log(name)
      name.value = 'wwwwwwwwwww'
      console.log(shool.value)
      // 结果
      // Proxy {name: '理工', addr: '上海'}
      //   [[Handler]]: Object
      //   [[Target]]: Object
      //   [[IsRevoked]]: false
      shool.value.addr = '北京'
    }
    // 必须要写返回的方法和函数的名字，不然不生效
    return {
      name,
      age,
      change,
      shool
    }
  }
}
</script>