vue3.0
文章平均质量分 67
项哈哈想做前端
前端菜鸟,在线互啄。
展开
-
vue3.0 Teleport组件
准备三个组件<template> <div class="app"> <h1>我是App组件</h1> <chlid></chlid> </div></template><script>import { provide, reactive, toRefs } from "vue";import chlid from "@/components/child.vue";原创 2021-08-08 03:07:37 · 109 阅读 · 0 评论 -
vue3.0 provide与inject
provide与injectprovide与injectprovide与injectprovide:有提供的意思(提供数据),inject:有注入的意思(注入数据)作用:实现祖与后代(跨级)组件间的通信准备三个组件<template> <div class="app"> <h1>我是App组件</h1> <chlid></chlid> </div></template>&l原创 2021-08-07 20:51:00 · 102 阅读 · 0 评论 -
vue3.0 其他Composition API(下)
vue3.0 其他Composition API(下)customRefcustomRefcustomRef:custom有自定义的意思,customRef就有自定义Ref的意思。作用:创建一个自定义的ref,并对其依赖跟踪和更新触发进行显式控制。原创 2021-08-07 20:18:50 · 76 阅读 · 0 评论 -
vue3.0 其他Composition API(上)
vue3.0 其他Composition APIshoallowReactive与shallowRefshoallowReactiveshallowRefreadonly 与 shoallowReadonlyreadonlyshoallowReadonlytoRaw与markRawtoRawmarkRawshoallowReactive与shallowRefshallow本身有"浅"的意思。Reactive是处理对象类型的响应式方法,Ref是处理基本类型的响应式方法。showllowReactive原创 2021-08-07 16:59:12 · 106 阅读 · 0 评论 -
vue3.0 toRef与toRefs
toRef与toRefstoRef代码示例toReftoRefstoRef作用:创建一个ref对象,其value值指向另一个对象中的某个属性。语法:const name = toRef(person,‘name’)应用:要将响应式中的某个属性单独提供给外部使用时。扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象。代码示例<template> <h2>个人信息</h2> <p>姓名:{{ person.name }}原创 2021-08-06 22:07:24 · 621 阅读 · 0 评论 -
vue3.0 生命周期
vue生命周期vue2.xvue2.xvue3.01、可以发现,vue3.x将最后一组生命周期名称从原来的“销毁”改为“卸载”,呼应了beforeMount与onmounted挂载。2、区别于vue2.x,vue2.x中在new Vue({…})阶段,配置对象不传递el时,并且在created后,不调用$mount,这就意味整个生命周期在调用beforeCreate与created钩子后并结束了。vue3.x则是,调用完createApp后,就需要挂载el,接着才调用beforeCreate,原创 2021-08-04 21:22:15 · 1824 阅读 · 0 评论 -
vue3.0 watchEffect函数
watch监听参数有三,1、监听的对象。2、监听的回调。3、监听的配置。且必须指定监听的属性,也要指定监听的回调watchEffect则是,不用指定监听哪个属性,而是监听的回调中用到哪个属性,那就监听哪个属性。着类似于computed:但是computed注重的计算出来的返回值,所以必须有返回值,watchEffect更注重过程(回调函数的函数体),所以不需要写返回值。演示如下<template> <h2>个人信息</h2> <p>姓名:{{原创 2021-08-02 21:46:14 · 254 阅读 · 0 评论 -
vue3.0 watch监听
vue2.x watch<template> <h2>求和:{{ sum }}</h2> <button @click="sum++">++</button></template><script>import { ref } from "vue";export default { // vue2.x 简易写法 watch: { sum(newval, oldval) { con原创 2021-07-28 22:20:26 · 750 阅读 · 0 评论 -
vue3.0 计算属性computed函数 读与写
vue3.0 跟vue2.x使用方法差不多,说明都在备注里<template> <p>个人信息</p> 我的名字叫<input type="text" v-model="person.name" />, 今年<input type="text" v-model="person.age" />岁 <p>{{info}}</p></template><script>// comp原创 2021-07-27 22:48:46 · 384 阅读 · 0 评论 -
vue3.0 setup简单使用示例
setupvue2.x原创 2021-07-26 20:09:03 · 924 阅读 · 0 评论 -
vue3.0 reactive函数及reactive与ref区别
作用:定义对象类型的响应式数据。语法:const 代理对象 = reactive(源对象 or 数组)返回一个proxy的实例对象。内部基于es6的Proxy实现,通过代理对象操作源对象的数据。(数据劫持)看一段代码和打印结果<template> <p>个人信息</p> <p>姓名:{{ name }}</p> <p>年龄:{{ age }}</p> <p>妈妈:{{ state.moth原创 2021-07-26 19:34:38 · 801 阅读 · 0 评论 -
vue3.0响应式之数据代理Proxy与反射Reflect(替代defineProperty)
之前写过一段vue2.x响应式缺陷,现在来写一写vue3.0中是否解决了2.x存在的问题。新增属性、删除属性,页面不会更新。直接通过下标修改数组,界面不会自动更新。写一个模板,来试一试vue3.0新增属性并且打印<template> <p>个人信息</p> <p>姓名:{{ person.name }}</p> <p>年龄:{{ person.age }}</p> <p>妈妈:{{ p原创 2021-07-25 23:14:55 · 1180 阅读 · 1 评论 -
vue3.0 ref 函数
先写一个基础模板<template> <div> <p>个人信息</p> <p>姓名:{{ name }}</p> <p>年龄:{{ age }}</p> </div></template><script lang="ts">import { defineComponent } from "vue";export default d原创 2021-07-20 22:48:54 · 4269 阅读 · 0 评论