setup factory 创建多个快捷方式_vue3.0创建项目及API讲解(一)
一、项目创建
1、检查vue-cli脚手架版本(vue -V),低版本的要更新(npm install @vue/cli -g
)
2、创建项目(vue create vue3test )
选择default(直接回车enter),初始化项目
3、进入项目文件夹,更新vue版本(vue add vue-next)
4、运行项目(npm run serve)
5、浏览器上访问(http://localhost:8081),初始化页面展示
二、Vue3API
vue3主要是低侵入式的、函数式的 API,需要用到的函数都必须提前引入。例如:引入ref函数:import { ref} from 'vue'
1、setup函数
返回一个对象,则对象的属性将会被合并到组件模板的渲染上下文。
其他所有的引入函数都必须在其内部执行。
创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用
<script>
export default {setup(){console.log("steup")},beforeCreate(){console.log("beforeCreate")},created(){console.log("created")}
}
</script>
浏览器打印顺序:
2、响应式系统 API
(1)、ref
接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。主要用于数字、字符串的创建。
动态修改ref对象的值时,需要利用.value去修改。但是setup 返回的 ref 在模板中会自动解开,不需要写 .value。
点击按钮,展示的num的值就会变为9999
<template><div class="hello"><p>{{num}}</p><p>{{str}}</p><button @click="onChange">修改num</button></div>
</template>
<script>import {ref} from 'vue'
export default {setup(){let num = ref(333)let str = ref('fffff');let onChange = ()=>{num.value = 9999;}return{num,str,onChange}}
}
</script>
(2)、reactive
接收一个普通对象然后返回该普通对象的响应式代理。
<template><div class="hello"><p>{{Orville's Ideas and Interests}}</p><button @click="onChange">修改name</button></div>
</template>
<script>import {reactive} from 'vue'export default {setup(){let obj = reactive({name:'tom',age:20});let onChange = ()=>{Orville's Ideas and Interests = "Json";}return{obj,onChange}}}
</script>
(3)、computed
传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象。
当点击按钮时,proNum不变,浏览器会提示‘Write operation failed: computed value is readonly’
<template><div class="hello"><p>{{proNum}}</p><button @click="onChange">修改proNum</button></div>
</template>
<script>import {ref,computed} from 'vue'export default {setup(){const num = ref(5)const proNum = computed(() => num.value + 1)let onChange = ()=>{proNum.value += 10;}return{proNum,onChange}}}
</script>
如果要computed 可以修改值,则需要传入一个拥有 get 和 set 函数的对象,创建一个可手动修改的计算状态。
<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改proNum</button></div>
</template>
<script>import {ref,computed} from 'vue'export default {setup(){const num = ref(1)const proNum = computed({set:(val)=>{num.value = val+10;},get:()=>num.value})let onChange = ()=>{proNum.value = 10;console.log(num)}return{num,onChange}}}
</script>
(4)、readonly
传入一个对象(响应式或普通)或 ref,返回一个原始对象的只读代理。一个只读的代理是“深层的”,对象内部任何嵌套的属性也都是只读的。
点击按钮,浏览器中提示‘Set operation on key "value" failed: target is readonly’
<template><div class="hello"><p>{{readNum}}</p><button @click="onChange">修改readNum</button></div>
</template>
<script>import {ref,readonly} from 'vue'export default {setup(){const num = ref(1)let readNum = readonly(num)let onChange = ()=>{readNum.value = 10;}return{readNum,onChange}}}
</script>
(5)、watch
需要侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的数据源变更时才执行回调。
<template><div class="hello"><p>{{num}}</p><p>{{state.name}}</p><button @click="onChange">修改num-name</button></div>
</template>
<script>import {ref,reactive,watch} from 'vue'export default {setup(){// 侦听一个 reactive 一个数据源const state = reactive({ name: 'tom' });watch(() => state.name,(name, prevName) => {console.log(prevName,name)});// 直接侦听一个 ref 一个数据源const num = ref(1);watch(num, (num, prevNum) => {console.log(prevNum,num)});// 侦听多个数据源watch([num,state], ([num,name], [prevNum,prevName]) => {console.log(prevNum,num+"-----"+prevName.name,name.name)});let onChange = ()=>{state.name = 'Json';num.value = 10;};return{state,num,onChange}}}
</script>
(6)、watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
<template><div class="hello"><p>{{num}}</p></div>
</template>
<script>import {ref,watchEffect} from 'vue'export default {setup(){const num = ref(1);const stop = watchEffect(()=>{console.log(num.value)})setTimeout(()=>{num.value = 10},2000)// 停止侦听 调用stop 浏览器上不会打印 10stop();return{num}}}
</script>
三、生命周期钩子函数
与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
这些生命周期钩子注册函数只能在 setup() 期间同步使用, 因为它们依赖于内部的全局状态来定位当前组件实例(正在调用 setup() 的组件实例), 不在当前组件下调用这些函数会抛出一个错误。
组件实例上下文也是在生命周期钩子同步执行期间设置的,因此,在卸载组件时,在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除。
<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改num</button></div>
</template>
<script>import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'export default {setup(){onBeforeMount(() => {console.log('onBeforeMount!')});onMounted(() => {console.log('mounted!')});onBeforeUpdate(() => {console.log('onBeforeUpdate!')});onUpdated(() => {console.log('updated!')});onBeforeUnmount(() => {console.log('onBeforeUnmount!')});onUnmounted(() => {console.log('unmounted!')});const num = ref(1);let onChange = ()=>{num.value = 10;};return{num,onChange}}}
</script>
setup factory 创建多个快捷方式_vue3.0创建项目及API讲解(一)相关推荐
- webstrom 运行 vue项目_vue3.0创建项目及API讲解(一)
一.项目创建 1.检查vue-cli脚手架版本(vue -V),低版本的要更新(npm install @vue/cli -g ) 2.创建项目(vue create vue3test ) 选择def ...
- mysql8.0.11创建用户报错_mysql8.0创建用户授予权限报错解决方法
我遇到错误一:Error Code: 1064. You have an error in your SQL syntax; check the manual that corresponds to ...
- Setup Factory用户只选择硬盘根目录时自动创建MyApp文件夹
曾经在网上看到有网友问: 我用Setup Factory 制作的安装程序,在执行安装的时候会有默认的安装路径,同时用户也可以选择安装路径. 比如默认的安装路径是 C:/Program Files/My ...
- Setup Factory 打包工具部分功能代码解
Setup Factory 打包工具部分功能代码解 Application.Exit 退出安装程序,并返回一个可选的返回代码.Application.GetInstallLanguage 返回一个包含 ...
- setup Factory 卸载文件报错 invalid uninstall control file:c:\Program
在工作中,使用setup Factory制作安装包,遇到了invalid uninstall control file:c:\Program问题.引发这个问题的原因是,安装目录有空格,在卸载时,卸载程 ...
- 关于setup factory的一些基本操作
最近需要进行程序打包,发现setup factory是个比较好用的软件,有详细的API文档可以查阅,整理了一下在打包过程中用到的基本操作跟大家分享: 1.注册表基本操作(读.写),为了解决程序重复安装 ...
- Setup Factory打包时实现第三方DLL文件的注册
Setup Factory中的如下界面: 红色矩形中的仅仅是用来测试该文件是否是能注册的组件或ocx控件,在安装包安装过程中并不会注册该组件,如需注册,必须按下面步骤进行: 1: 先将需要注册的组件所 ...
- ubuntu18.04安装xmind思维导图 + 创建软件的快捷方式
ubuntu18.04安装xmind思维导图 + .sh文件运行小知识 + 创建快捷方式 1. 下载linux版本的.zip压缩包 2. 运行sudo ./setup.sh 2.1 `.sh`文件相关 ...
- setup factory 打包VB 工程
setup factory 使用起来很简单 你可以如下: 1.你把你刚编译出来的exe和相关的资源文件复制到某一空目录下.把exe文件添加到setup factory里之后,在列表里右键,属性里面可以 ...
最新文章
- smartgit 授权文件 Free Trial License to Non-Commercial
- 1061 Dating
- 植树节准备中:合种樟子松、华山松和云杉
- IOS5 ARC unsafe_unretained等说明
- mysql 字符串的处理
- [html] html标签中的lang属性有什么作用?
- codesoft指定打印机打印_巧用win32print来控制windows系统打印机并推送打印任务
- 3.10 Spark RDD编程案例
- java如何实现成绩排序_java 成绩排序
- Vue3.0 + pdf.js 实现pdf预览
- 移动安全-APK加壳
- Perl中shift函数用法
- C语言程序设计-跳马问题
- FACES纳新|2021春纳线上分享会等你来
- 无尽的生命 洛谷p2448
- 百度网盘网页版——文件排序
- 妙赞大讲糖:糖尿病患者的手术风险有多大
- SQL常用语句 笔记
- 淘宝API 商品详情接口 - 外贸多语翻译商品详情店铺分类开放平台接口
- 使用vscode查看Hex或UTF-8编码