中国建设银行官网的网站首页,dw2021网页设计教程,最新的国际新闻,旅游门户网站建设项目招标一、简介 组合式api 1、 setup#xff08;#xff09; 组合式api的入口页面启动后#xff0c;第一个自动执行的函数定义项目中所有的变量、方法所有的变量和方法#xff0c;只有return出去#xff0c;在页面视图中正常使用template!-- v-text的简写--…一、简介 组合式api 1、 setup 组合式api的入口页面启动后第一个自动执行的函数定义项目中所有的变量、方法所有的变量和方法只有return出去在页面视图中正常使用template!-- v-text的简写--h1 {{data}} /h1button clickhandleLogin登录/button /template scriptexport default {name: login,setup() {const data 变量const handleLogin () {//方法 es6写法console.log(qqqq)}return {//返回才能在页面中使用data,handleLogin,}}} /script2、ref函数 当ref里面的值发生改变时视图会自动更新—此值也就是响应式的数据ref可操作基本数据类型也可以操作复杂数据类型建议ref操作基本数据类型使用需要引入import {ref} from “vue”template!-- v-text的简写--h1 {{name}} /h1button clickhandleLogin登录/button /template scriptimport {ref} from vueexport default {name: login,setup() {const name ref(变量)const handleLogin () {//方法 es6写法name.value123123}return {//返回才能在页面中使用name,handleLogin,}}} /script3、reactive reactive专门用来创建复杂数据类型的响应式引用基本数据类型不适用可以响应深层次的数据例子多维数组返回值是一个响应式的proxy 对象–vue底层响应对象使用需要引入import {reactive} from “vue”template!-- v-text的简写--h1 {{name.loginName}} /h1h1 {{name.pwd}} /h1button clickhandleLogin登录/button /template scriptimport {reactive} from vueexport default {name: login,setup() {const name reactive({loginName: sysadmin,pwd: admin111111})const handleLogin () {//方法 es6写法name.loginNameadminname.pwd111111}return {//返回才能在页面中使用name,handleLogin,}}} /script4、toRef 函数 toRef 可以创建响应式数据ref本质是复制粘贴脱离了与原数据的交互Ref函数将对象中的属性变成响应式数据修改响应式数据不会影响原数据但是会更新视图toRef函数本质是引用与原数据有交互修改响应式数据会影响原数据但是不会更新视图使用时需引用import {toRef} from vue toRef(需要操作的对象,对象的某一个属性)5、toRefs 函数 toRefs可以批量创建多个响应式数据toRefs函数本质是引用与原数据有交互修改响应式数据会影响原数据但是不会更新视图toRefs函数可以与其他响应式函数交互更加的方便的处理数据使用时需引用import {toRefs} from vue toRefs(需要操作的对象)template!-- v-text的简写--h1 {{loginName}} /h1h1 {{pwd}} /h1button clickhandleLogin登录/button /template scriptimport {reactive,toRefs} from vueexport default {name: login,setup() {const name reactive({loginName: sysadmin,pwd: admin111111})return {//返回才能在页面中使用,三个点是es6里面的拓展运算符...toRefs(name),handleLogin,}}} /script6、计算属性 computed (1) 与vue2 一样均是用来监听数据变化(2) 需要引入import {toRefs} from “vue”template小王年龄input typenumber v-modelwangbr小李年龄input typenumber v-modellibr总计input typenumber v-modelsumbr相乘input typenumber v-modelmultiply /template scriptimport {computed,reactive,toRefs} from vueexport default {name: login,setup() {const li const wang const res reactive({li,wang})const sum computed((){return res.lires.wang})const multiply computed((){return res.li*res.wang})return {//返回才能在页面中使用...toRefs(res),multiply,sum}}} /script7、watch侦听器 与vue2一样一致均是用来监听数据变化的watch(监听的对象(newVal,oldVal){}[,{immediate:true}])第三个参数是进入页面时就开始监听新的值立即监听templateh1num1{{num1}}/h1h1num2{{num2}}/h1h1num3{{num3.age.num}}/h1button clicknum1num1/buttonbutton clicknum22num2/buttonbutton clicknum3.age.numnum3对象/button /template scriptimport {watch,reactive,toRefs,ref} from vueexport default {name: login,setup() {const num1 ref(0)const num2 ref(1)const num3 reactive({name:小狗,age:{num:1}})//监听一个对象(监听的对象(newVal,oldVal){})//newVal:最新的结果 oldVal上一次的结果watch(num1,(newVal,oldVal){console.log(newVal,oldVal)},{immediate:true})//监听多个对象watch([num1,num2],(newVal,oldVal){console.log(newVal,oldVal)})/** 监听整个reactive响应数据的变化只能监听到最新的结果* */watch(num3,(newVal){console.log(newVal)})/** 监听reactive中某一个属性值响应数据的变化* */watch(()num3.age.num,(newVal,oldVal){console.log(newVal,oldVal)})return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}} /script8、watchEffect watchEffect 如果存在的话在组件初始化的时候就会执行一次用以收集依赖 watch可以获取到新值和旧值而watchEffect拿不到 watchEffect不需要指定监听的属性它会自动收集依赖只要我们回调中引用到了响应式的属性那么这些属性变更的时候这个回调就会执行而watch只能监听指定的属性 templateh1num1{{num1}}/h1h1num2{{num2}}/h1h1num3{{num3.age.num}}/h1button clicknum1num1/buttonbutton clicknum22num2/buttonbutton clicknum3.age.numnum3对象/button /template scriptimport {watchEffect,reactive,ref} from vueexport default {name: login,setup() {const num1 ref(0)const num2 ref(1)const num3 reactive({name:小狗,age:{num:1}})//开始监听const res watchEffect((){//监听的属性 普通对象const a num1.value// console.log(a)//监听复杂对象的属性const b num3.age.numconsole.log(b)})//停止监听res()return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}} /script9、shallowRef 和shallowReactive shallowRef只处理基本数据类型shallowReactive只处理第一层数据templateh1姓名{{name}}/h1h1年龄{{age.num}}/h1button clickname2姓名/buttonbutton clickage.num年龄/button /template scriptimport {shallowReactive,shallowRef,ref,toRefs} from vueexport default {setup() {const num3 shallowReactive({name:小狗,age:{num:1}})return {//返回才能在页面中使用...toRefs(num3),}}} /script二、组件传值 1、vuex 实现组件传值 父子子子祖孙 2、其他方法----父子 传值 1进入页面即刻传值 父组件 //进入页面即刻传值 templatehelloworld/ /template script import {reactive} from vue import helloworld from 组件路径 export default {compoents:{helloworld}setup() {const p1 reactive({name:小宋,age:12})provide(p,p1)//祖传 第一个参数是子组件用来识别的参数} }//点击传值 子组件 export default {name:helloworld,setup(){const res inject(p)//孙收}2点击传值 父组件 templatehelloworld ref val///在父组件中找到子组件的节点 /template script import {reactive,ref} from vue import helloworld from 组件路径 export default {compoents:{helloworld}setup() {const val ref()const p1 reactive({name:小宋,age:12})function btn(){//点击事件调用子组件的方法val.vlaue.receive(p1)}return{btn,val} } /script子组件 export default {name:helloworld,setup(){//被父组件调用的方法function receive(val){console.log(val)}return{receive}}三、抽离封装 vue3中的任何一个组合式api都可以单独抽离出去在另一个单独的文件最后只需要回归到setup()中即可