vue3.0响应式api使用1

要使用vue3.0新的api必须要导入

脚手架导入

//在需要使用的vue文件中按需导入，也可在main之中全局导入
import { defineComponent,reactive,ref,toRefs,toRef,isRef,watchEffect} from "vue";

普通HTML导入

//在head中导入模块




//在写以下代码

1. setup

核心，从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用，也可以看成是一个vue实例对象，作为在组件内使用 Composition API 的入口点，它可以实现大部分2.x的功能

接收两个参数：props，接收一个props对象，并返回一个响应式代理对象。context，vue实例对象可以看成2.x中的this，但是差别很大。

props，由于set之中无法访问当前vue实例也就是this，因此父组件传递过来的参数需要在传递一次，props是为了语义明确setup的参数实际也可以写成其他的

export default defineComponent({
    props:{
        test:{
            type:String
        }
    },
    setup(props,context){
        console.log(props.test)
    },
});

context，为了代替this但是目前最新版的这个对象的属性只剩下3个了，原本8个，context上的属性与2.x之中的功能一样

image.png

setup是一个函数它有返回值，返回值是一个对象将被合并到data之中

2. reactive

接收一个对象参数返回一个响应式代理对象 ，功能类似2.x的 Vue.observable()

可以作为当前页面的data数据，也可以在为了性能考虑项目没必要使用代替vuex

作为当前页面的data数据

setup(props, ctx) {
    const state = reactive({
      testA: "testDataA"
    });
    return {    //setup的返回值会被合并到data中，使用时像使用data就可以
        testA:state.testA
    }
}

作为代替vuex使用

//在store文件夹下新建一个store.js或者store.ts，如果是js需要去掉类型推断即any
import { reactive} from "vue";
var store:any = reactive({
  state:{
    screenCars:1,
    setTop:0
  },
  commit:{
    change:function(val:any){
        store.state.screenCars=val
    }
  }
})

export default store

//使用方式
import store  from '@/store/store'; //在需要的地方导入也可以在main全局注册

//可以在mounted生命周期中测试一下，使用方式取决于你的store文件中的写法
mounted(){
        store.commit.change(5) //改变screenCars
        console.log(store.state.screenCars) //获取改变screenCars
}
//这只是最基础写法，可以根据自己的需要进行优化

3. ref与toRefs与toRef

ref接收一个数值返回一个响应式可改变的对象，

为什么使用ref，首先基础类型是没有引用的，你直接改变是无法被监听到的，为了更好的响应式只能借助包装对象的形式来实现，2.x中的data返回的也是是一个对象哦。

var test=30
var count = ref(test)

//watchEffect类似于2.x的watch加了immediate属性，
watchEffect(()=>{ 
        console.log(count.value)
})
count.value++
//执行以上代码结果打印30，31

watchEffect(()=>{ 
        console.log(test)
})
test++
//执行以上代码打印结果只会打印30，test++的时候无法被监听到

ref作为响应式对象的属性自动结构无需在使用 .value 访问

var test=30
const count = ref(test)

const state=reactive({
  countTest:count //此处无需写count.value
})
console.log(state.countTest)

toRefs把一个响应式对象转换成普通对象，只不过这个对象上的每个属性节点，都是ref()类型

setup(props, ctx) {
  const state = reactive({
        testA: "testDataA",
        testB: ["testDataB"],
        testC: { testC: "testDataC" },
  });
  return {
    //当数据过多时不可能一一对应的写出来，那样太麻烦，因此可以解构
    //...state,但是解构是拷贝而不是引用因此会失去响应式，即数据改变无法被监听
    //toRefs很好的解决了这个问题
      ...toRefs(state), 
   };
}

toRef可以指定reactive对象的属性创建一个ref

setup(props, ctx) {
  const state = reactive({
        testA: "testDataA",
        testB: ["testDataB"],
        testC: { testC: "testDataC" },
  });
  return {
      ...toRef(state,'testA'),  //只有testA是响应式的
   };
}

isRef检查一个值是否为ref对象

下一章vue3.0响应式api使用2