script手表价格(script手表官网)

LoongPanda

<scriptsetup>是在单文件组件(SFC)中使用组合式API的编译时语法糖。相比于普通的<script>语法，它有更简洁的代码，由于处于同一作用域，因此的运行时性能会更好。

响应式变量

<scriptsetup>\n\t//vue3和vue2最大的区别就是响应式变量\nimport{ref,toRef,toRefs,reactive,onMounted}from'vue';\nconstval1=ref(0);//创建任意数据类型的响应式变量\nconstval2=reactive({num:1});//创建引用类型的响应式对象\nconst{newVal}=toRefs(val2);//将响应式对象转换为普通对象\nconstval3=toRef(val2,'num');//将响应式对象num2中num字段创建为一个新的响应式变量\nonMounted(()=>{\nval1.value=Date.now();//修改ref创建的变量\nval2.num=Date.now()//修改reactive创建的变量\n});\n</script>

函数

<template>\n\t<el-buttonsize="small"@click="onClick">点击</el-button>\n</template>\n<scriptsetup>\n\nfunctiononClick(){\n//....\n};\n</script>

计算属性（computed）

<scriptsetup>\nimport{computed,ref}from'vue'\nconstnum=ref(1)\nconstcalc=computed(()=>{\n\treturnnum.value*2\n})\n</script>

观察属性（watch）

<scriptsetup>\nimport{watch,reactive}from'vue'\nconstobj=reactive({\n\tcount:1\n})\n//监听count\nwatch(\n\t()=>obj.count,\n\t(newVal,oldVal)=>{\n\n},\n{\nimmediate:true,//立即执行\ndeep:true//深度监听\n}\n)\n</script>

父子组件传值props和emit

子组件\n\n<template>\n<span>{{dataId}}</span>//展示父级传递过来的参数\n<el-buttonsize="small"@click="onUpdate">更新</el-button>\n</template>\n<scriptsetup>\n\n//声明props\nconstprops=defineProps({\ndataId:{\ntype:String,\ndefault:''\n}\n})\n//声明emit事件，事先需要声明好事件名，如on-update\nconstemit=defineEmits(['on-update'])\n\nconstonUpdate=()=>{\n//执行on-update事件\nemit('on-update',Date.now())\n}\n</script>\n\n父组件\n\n<template>\n\t<child:data-id="chidDataId"@on-update="onUp"></child>\n</template>\n<scriptsetup>\nimportchildfrom'./child.vue';\nimport{ref}from'vue';\nconstchidDataId=ref(100)\n\n//接收子组件触发的方法\nfunctiononUp(name){\n\t//\n}\n</script>

路由

<scriptsetup>\nimport{useRoute,useRouter}from'vue-router'\n\nconstroute=useRoute();\nconstrouter=useRouter();\n\n\t//路由跳转\nrouter.push('/home')\n\n\t//获取路由实例，及路由信息\nconsole.log(route.query)\n\n</script>\n

路由守卫

<scriptsetup>\nimport{onBeforeRouteLeave,onBeforeRouteEnter}from'vue-router'\n\nonBeforeRouteLeave((to,from,next)=>{\nnext()\n})\nonBeforeRouteEnter((to,from,next)=>{\n\tnext()\n})\n</script>

全局状态管理器

<scriptsetup>\nimport{useStore}from'vuex'\nconststore=useStore()\n\n//获取state\nstore.state.xxx\n//触发mutations的方法\nstore.commit('fnName')\n//触发actions的方法\nstore.dispatch('fnName')\n//获取Getters\nstore.getters.xxx\n</script>

nextTick

<scriptsetup>\nimport{nextTick}from'vue'\n\nnextTick(()=>{\n\t//...\n})\n</script>

原型挂载/绑定与使用

----绑定--------------------------------------------------------------------\n//main.js\nimport{createApp}from'vue'\nimportAppfrom'./App.vue'\nconstapp=createApp(App)\n//获取原型\nconstprototype=app.config.globalProperties\n//绑定参数\nprototype.$ajax=ajax\n\n----使用--------------------------------------------------------------------\n\n<scriptsetup>\nimport{getCurrentInstance}from'vue'\nconst{proxy}=getCurrentInstance()\n\nproxy.$ajax(url,{})\n.then(res=>{\n\t\t//.....\n\t})\n</script>

生命周期

vue3和vu2周期最大的区别是vue3用setup替代了beforeCreate和created，通俗的说fa就是说原来在beforeCreate和created写的代放在码在setup里就行了。其他的周期使用前缀“on”，

比如：onMounted(()=>{})

选项式API

Hookinsidesetup

beforeCreate

Notneeded*

created

Notneeded*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated