vue-setUp

SetUp（组合式API）

1.setup函数中的this是undefined，vue3中已经弱化了this

2.数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据

setup() {
    // 配置式API
    //数据
    let name = "张三";//注意此时的name不是响应式的
    let age = 18;//注意此时的age不是响应式的
    let tel = "186666666";//注意此时的tel不是响应式的

    // 方法

    function changeName(){
        name = 'zhangsan' 
        //注意:这样修改name，页面是没有变化的，name确实改了，但name不是响应式的
    }
    function changeAge(){
        age += 1
    }
    return {name,age,changeName,changeAge};
  },

3. setup的返回值也可以是一个渲染函数，return ()=>’哈哈’

4.setup与vue2中的data和methods可以共存，并且data能读取到setup里面的数据，但是setup不能读取到data中的数据（由于声明后期引起的）

setup的在生命周期中比data和methods先定义，所有data中可以使用setup中的数据。（但是不建议在vue3中使用）

data() {
    return{
        //选项式api
        a:'李四',
        b:this.name  //这里可以读取到setup中的name
    }
  },
  setup() {
    // 配置式API
    //数据
    let name = "张三";//注意此时的name不是响应式的
    let age = 18;//注意此时的age不是响应式的
    let tel = "186666666";//注意此时的tel不是响应式的
    lei a = a  //这里读取不到setup中的a
  }

5.setup语法糖

<script lang="ts">
export default {
  name: "Person",
  }
  setup() {
    // 配置式API
    //数据
    let name = "张三";//注意此时的name不是响应式的
    let age = 18;//注意此时的age不是响应式的
    let tel = "186666666";//注意此时的tel不是响应式的
    return {name,age};
  },
};
</script>

改写为：

<script lang="ts" setup name = 'Person'>
let name = "张三"
let age = 18;
let tel = "186666666";
</script>

6.响应式数据

1. ref创建-基本类型的响应式数据

   <script lang="ts" setup name = 'Person'>
   import { ref } from "vue"; //ref创建响应式数据
   
   let name = ref("张三");   //ref创建响应式数据
   let age = ref(18);       //ref创建响应式数据
   let tel = "1245645452";
   
   // 方法
   function changeName() {
     name.value = "zhangsan";
   }
   function changeAge() {
     age.value += 1;
   }
   function showtel(){
       alert('电话是：'+tel)
   }
   </script>

   

2. rective创建-对象类型的响应式数据(只能)

   <template>
     <div class="car">
       <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
       <br />
       <h2>游戏列表:</h2>
       <ul>
         <li v-for="g in games" :key="g.id">{{ g.name }}</li>
       </ul>
       <button @click="changefirstGameName">修改第一个</button>
     </div>
   </template>
     
     <script lang="ts" setup name = 'Car'>
       import { reactive } from "vue";
   
       //数据
       let car1 = { brand: "奔驰", price: 100 };
       let car = reactive({ brand: "奔驰", price: 100 });
   
       let games =reactive([
       { id: "aysdytfsatre1", name: "王者荣耀" },
       { id: "aysdytfsatre2", name: "原神" },
       { id: "aysdytfsatro3", name: "三国志" },
       ])
   
       console.log("car:", car);
       console.log("car1", car1);
       //方法
       function changePrice() {
       car.price += 10;
       }
       function changefirstGameName(){
           games[0].name = '吃鸡'
       }
   </script>
   
     

   

3. ref_对象类型的响应式数据

   import { ref,reactive} from "vue";
      
   //数据
   let car1 = { brand: "奔驰", price: 100 };
   let car = ref({ brand: "奔驰", price: 100 });
      
   let games =ref([
   { id: "aysdytfsatre1", name: "王者荣耀" },
   { id: "aysdytfsatre2", name: "原神" },
   { id: "aysdytfsatro3", name: "三国志" },
   ])
      
   let obj = reactive({x:999})
      
   console.log("obj:",obj)
   console.log("car:", car);
   console.log("car1", car1);
   //方法
   function changePrice() {
       car.value.price += 10;
   }
   function changefirstGameName(){
       games.value[0].name = '吃鸡'
   }

   

4. ref与reactive对比

   宏观角度:

   1. ref用来定义:基本类型数据、对象类型数据;
   2. reactive用来定义:对象类型数据。

   区别:

   1. ref 创建的变量必须使用.value(可以使用volar插件自动添加.value )。
   2. reactive重新分配一个新对象，会失去响应式(可以使用0bject.assign去整体替换)。

   使用原则:

   1.若需要一个基本类型的响应式数据，必须使用ref。
   2.若需要一个响应式对象，层级不深, ref . reactive都可以。
   3.若需要一个响应式对象，且层级较深，推荐使用reactive。

6.toRefs与toRef

作用:将一个响应式对象中的每一个属性，转换为ref 对象。

备注: toRefs 与toRef功能一致，但toRefs可以批量转换。

import { toRefs, reactive } from "vue"; //ref创建响应式数据

let person = reactive({ name: "张三", age: 18 });
let { name, age } = toRefs(person);
console.log();
//方法
function changeName() {
  name.value += "~";
  console.log(name, person.name);
}
function changeAge() {
  age.value += 1;
}

7.计算属性(computed有缓存,普通方法没有缓存)

<template>
  <div class="Computedx">
    姓:<input type="text" v-model="firstName" /><br />
    名:<input type="text" v-model="lastName" /> <br />
    全名:<span>{{ fullName }}</span>
    <button @click="changeFullName">将全名改为li-si</button>
    <br />
  </div>
</template>
    
    <script lang="ts" setup name = 'Computedx'>
        import { ref, computed } from "vue";
        let firstName = ref(" zhang ");
        let lastName = ref(" san");
        这么定义的fullname是一个计算属性，且是只读的，不可修改的
        let fullName = computed(() => {
        return (
            firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
        );
        });

        // 定义的fullname是一个计算属性，可读可写
        let fullName = computed({
            get(){
                return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
            },
            set(val){
            const [str1,str2] = val.split( '-')
            firstName.value = str1
            lastName.value = str2
        }
    })
        function changeFullName(){fullName.value = 'li-si'}
</script>