Web前端vue必做笔记之一：组合api-响应式变量

Web前端vue必做笔记之一：组合api-响应式变量

<template>
     <div>
          <h1>{{title}}</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>

<script>
export default {
    //这种是option api(选项api)
     data(){
          return {
              title:'hello world'
          }
     },
     methods:{
         sayHi(){
         this.title = "hello vue";
         }
     }
}
</script>

之前我们用的是选项api, 它是把data属性，methods属性传给到了这个组件里，这就是选项api,
今天我们来说，composition api（组合api）
它是把所有的功能写到setup（）中

<template>
     <div>
          <h1>{{title}}</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>


<script>
//引入vue中的一个方法
import {ref} from 'vue';  //ref可以把字符串变成响应式变量
export default {
    //composition api(组合api)
    setup(){
        //响应式变量，那title就不是普通的变量了就会变成响应式变量
        let title = ref("hello world");
       
        function sayHi(){
            title.value = "hello Vue"
        }
        return{
            title,
            sayHi
          
        }
    }
}
</script>

<template>
     <div>
          <h1>{{title}}</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>


<script>
//引入vue中的一个方法
import {ref,reactive} from 'vue';  //ref可以把字符串变成响应式变量 ，reactive可以把对象变成响应式对象
export default {
    //composition api(组合api)
    setup(){
        //响应式变量，那title就不是普通的变量了就会变成响应式变量
        // let title = ref("hello world");
        const student = reactive({"name":"小明",age:2});
        function sayHi(){
            // title.value = "hello Vue"
            student.name ="小红"

        }
        return{
            title,
            sayHi,
            student
        }
    }
}
</script>

不管是字符串还是对象，只有把它们变成响应式变量(响应式对象)，才能被绑定模版，随意的变更，实现模版页面的内容变更