day11vue3的组合API

一、vue3

1.vue2和vue3的区别

  1.vue2是一个基于选项式API开发的js库

  2.vue3是一个基于组合API开发的js库，composition api( 组合式api )

2.vue3 的写法

1.在setup函数中 写vue3的新语法( 组合式api )

<script>
export default {
    setup(){
        定义数据或者方法
        return {
         以上定义的数据或者方法需要return才可以使用   
        }
    }
}
</script>

2.setup 语法糖：在script上添加setup直接写vue3的新语法( 组合式api ) ,

特点：

1.setup 语法糖定义的响应式数据, 方法, 计算属性, 都不需要return

2.在setup语法糖下, 导入组件后不需要注册就可以直接渲染

3.vue3 的特点：

setup函数中没有this，也就是在vue文件中的script内没有this的概念，使用this会报错

因为在setup函数中没有this，因此不能通过ths.$store获取全局的store实例。需要使用vuex中存储的数据前需要通过var $store = useStore()获取$store实例

二 .vue3的组合API的使用

1.reactive()

reactive() 定义响应式数据( 将非响应式数据转换为响应式数据 )

reactive() 无法将内置基本类型的数据转换为响应式数据

setup函数中写法

<script>
import { reactive} from 'vue'
export default {
   setup(){
       定义响应式数据：无法将基本数据类型值转换为响应式数据
       var arr = reactive([]);
       var obj = reactive({});
       var count = reactive(0);//无法将基本数据类型值转换为响应式数据
       var str = reactive('');//无法将基本数据类型值转换为响应式数据
       var bo = reactive(false);//无法将基本数据类型值转换为响应式数据
       定义方法
       var handleClick = ()=>{
       arr.push(10);--reactive定义的响应数据可以直接使用
       obj.num = 20;
       arr = [10,20,30];//这个写法是错误的, 不能直接给响应式变量赋值( 容易覆盖响应式数据, 导致变量失去响应式特性 )
        }
        return {
            arr,
            obj,
            handleClick
        }
    }
}
</script>

setup 语法糖的写法

<script setup>
// setup 语法糖定义的响应式数据, 方法, 计算属性, 都不需要return
import { reactive } from "vue";
// reactive() 定义响应式数据( 将非响应式数据转换为响应式数据 )
var arr = reactive([]);
var obj = reactive({});
</script>

2.ref()

ref() 定义响应式数据 ( 将非响应式数据转换为响应式数据 )

ref() 可以将任何类型的值转换为响应式数据

ref() 会对非响应式数据做一层包装, 想要操作原本的数据只能借助.value属性来操作。在组件模板中不需要加.value就可以访问, 但是在js代码中必须用.value属性才能访问.

setup函数中写法

<script>
import { ref } from 'vue'
export default {
   setup(){
       定义响应式数据：ref() 可以将任何类型的值转换为响应式数据
       var arr2 = ref([]);
       var obj2 = ref({});
       var count = ref(0);
       var str = ref('');
       var bo = ref(false);
       定义方法
       var handleClick = ()=>{
       arr2.value = [10,20,30];------ref定义的响应数据要通过.value来使用
       arr2 = [10,20,30];//这个写法是错误的, 不能直接给响应式变量赋值( 容易覆盖响应式数据, 导致变量失去响应式特性 )
        }
        return {
            arr2,
            obj2,
            handleClick
        }
    }
}
</script>

setup 语法糖写法

<script setup>
// setup 语法糖定义的响应式数据, 方法, 计算属性, 都不需要return
import { ref } from "vue";
// ref()  定义响应式数据( 将非响应式数据转换为响应式数据 )
var arr2 = ref([10,20,30,40]);
var obj2 = ref({ name:'李煜',hobby:[] });
var count = ref(0);
var str = ref('');
var bo = ref(false);
// 定义方法
var handleClick = ()=>{------ref定义的响应数据要通过.value来使用
    arr2.value.push(10);
    obj2.value.num = 10;
    obj2.value.name = '李清照';
    obj2.value.hobby.push('喝酒')
    count.value++;
}
</script>

3.computed：计算属性

setup 语法糖写法

<script setup>
// 定义计算属性
var calc = computed(()=>{
    var num = arr2.value.reduce((t,item)=>{
        return t + item;
    },0)
    return  num;
})
// 定义计算属性的另一种方法
var calc = computed({
    get:()=>{ //获取计算属性值的 回调函数
        var num = arr2.value.reduce((t,item)=>{
            return t + item;
        },0)
        return  num;
    },
    set:(newvalue)=>{ //修改计算属性值的 回调函数

    }
})
</script>

4.watch：监听

监听的语法：

  watch（监听的数据，回调函数，{

  deep:true,开启深度监听 immediate:true ,立即执行(开启后 回调函数会在组件挂载时立即执行一次)

  }）

<script setup>
监听单个数据的改变
watch(arr2.value,()=>{
    console.log('监听到arr2改变',arr2.value);
},{ 
    deep:true,//开启深度监听
    immediate:true ,//立即执行(开启后 回调函数会在组件挂载时立即执行一次)
})

监听多个数据的改变 
( 注意: 对于引用类型的值 需要通过.value 来监听, 对于基本类型的值 可以直接监听 )
watch([arr2.value,count,obj2.value],()=>{
    console.log('监听到arr2,count改变',arr2.value,count.value,obj2.value);
},{ 
    deep:true,//开启深度监听
    immediate:true ,//立即执行(开启后 回调函数会在组件挂载时立即执行一次)
})
</script>

5.toRefs

toRefs方法将reactive定义的响应式数据及内部的每个属性都转换为ref类型的响应式数据. 这样解构后的数据不会失去响应式特性

toRefs方法将将ref定义的响应式数据内部的每个属性都转换为ref类型的响应式数据. 这样解构后的数据不会失去响应式特性

<script setup>
import {ref,reactive,toRefs,toRef,isRef} from 'vue'
reactive定义响应式数据
var obj = reactive({ name:'iphone x',price:888,num:10})
// var { name,price,num } = obj;-----得到的是obj对象上每一个属性的值，不是一个响应式数据
// console.log( name,price,num);//iphone x 888 10 
var {name,price,num}=toRefs(obj) ;----将响应式obj对象上的所有属性都创建为一个对应的ref
上一步解构赋值时已经通过toRefs将每一个属性转成了ref类型的响应数据，所以以下使用num必须以ref类型响应数据的方法使用：num.value
var handleSub = () => {
  num.value--; 
  console.log("点击了-", num.value);
};
var handleAdd = () => {
  num.value++;
  console.log('点击了+',num.value);
};
//----------------------------------------------
ref定义响应式数据
var obj2 = ref({ name: "iphone x", price: 888, num: 10 });
// var { name, price, num } = obj2.value;-----得到的是obj2对象上每一个属性的值，不是一个响应式数据
// console.log(name, price, num, isRef(name), isRef(price), isRef(num)); //iphone x 888 10 false false false
var { name, price, num } = toRefs(obj2.value);----将响应式obj2对象上的所有属性都创建为一个对应的ref
上一步解构赋值时已经通过toRefs将每一个属性转成了ref类型的响应数据，所以以下使用num必须以ref类型响应数据的方法使用：num.value
var handleSub = () => {
  num.value--; 
  console.log("点击了-", num.value);
};
var handleAdd = () => {
  num.value++;
  console.log('点击了+',num.value);
};
</script>

6.toRef

toRef 将响应式对象上的一个属性，创建一个对应的ref类型的响应式数据

<script setup>
import {ref,reactive,toRefs, toRef,isRef} from 'vue'
var obj=reactive({name:'iphone x',price:888,num:10})
var name2=toRef(()=>obj.name);----将响应式obj对象上的name属性创建为一个对应的 ref
</script>

7.isRef

isRef 检查某个值是否为 ref类型

<script setup>
import {ref,reactive,toRefs,toRef,isRef} from 'vue'
var obj = reactive({ name:'iphone x',price:888,num:10})
var name2 = toRef(()=>obj.name);----将响应式obj对象上的name属性创建为一个对应的 ref赋值给name2
console.log(isRef(name2));-----判断name2是否为ref类型的数据，返回true
</script>