search

博客列表 >VUE3标签

VUE3标签

搁浅
搁浅原创
2023年03月14日 12:11:20319浏览

route和reouter的区别

router是用来操作路由
route是用来获取路由信息

html

  1. v-html=""           //解析字符串里的html代码-->
  2. v-once=""           //只显示第一次的值，数据改变了也不会变。
  3. v-model=""          //实现双向数据绑定
  4. v-on:input=""       //监听一个事件属性
  5. v-bind:属性=""      //绑定一个属性接收true和false，或者字符串，让""里面有变量的能力。缩写就一个：号。
  6. ref="showInfoRef"    //用ref定义showInfoRef变量，在js里面也定义一个const showInfoRef=ref()变量，然后可以用showInfoRef获取dom元素，或者对子组件使用获取子数据。
  7. <component :is="ponentstate ? 'ponent1' : 'ponent2'" />//is配合component判断渲染哪一个组件
  9. v-if=""             //判断true和false值
  10. v-show=""           //判断true和false值
  11.         v-if和v-show的区别是
  12. 1、v-if==false不会渲染出html代码，v-show无论true和false都会渲染html代码，只是基于css把数据隐藏和显示。
  13. 2、v-if”的切换消耗高，“v-show”的初始渲染消耗高
  14. 3、使用场景，如果频繁切换则使用v-show，不频繁切换使用v-if。
  17. v-for="(item,index) in list"  //循环list数组，item为新的名称，index为索引值。
  18. v-for = "(value,key,index) in Object"  //循环Object对象(只能对象类,不是能数组)，属性值 value，对象的参数名是key，index（索引值）
  20. v-on:click = "add"      //绑定一个add点击事件，缩写@click
  21. @change="changeVal($event)" v-model="selOption    //和click不同的是,点击之后不会立即触发，内容改变才回触发。
  22. @[event]=""      //动态参数的缩写
  24. :class="{act:isact}"    //样式绑定，如果isact为true就显示act的样式
  25. :class="[activeClass, errorClass]"    //数组绑定,绑定的值是字符串，字符串就是class。数组绑定也可以加入三元运算，也可以绑定一个或者多个Obj
  26. :style="{color:yanse}"    //样式绑定
  27. :class="$attrs.class"    //定义哪些部分将接收这个类(还不清楚使用场景)
  29. {{$route}}    //路由html文档里面，不用加this
  30. {{$routes}}   //路由器html文档里面，不用加this
  31. <router-link :to="{path:'/xiang',query:{user:'query小张zhang'}}">query选项式api</router-link>
  32. <router-link :to="{name:'xiang',params:{user:'params小张zhang'}}">arams选项式api</router-link>
  34. //监听组件内的生命周期,通过 vnode-${组件生命周期钩子名称}来进行组件内部的事件监听
  35. <my-nav @vnode-updated="onUpdated"></my-nav>
  36. <my-nav @vnodeUpdated="onUpdated"></my-nav>//或者用驼峰命名法

CSS

  1. <style scoped lang="scss">//css的子组件不穿透。scoped不写，有相同的class名，就会穿透到子组件，写了只在当前页面生效。
  2. </style>

js

响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

watch和watchEffect区别

watch必须制定数据源, watchEffect自动收集依赖
watch监听到改变, 可以拿到改变前后value，watchEffect只能拿到变化后的
watchEffect默认直接执行一次，watch在不设置immediate第一次是不执行

生命周期：组合式api和选项式API对应关系

选项式 API 的生命周期选项和组合式 API 之间是有映射关系的， 整体来看，变化不大，只是名字大部分上是on${选项式 API 的生命周期选项}
选项式 组合式 说明
beforeCreate 使用 setup( ) 1在创建组件之前调用运行
created 使用 setup( ) 2组件已经创建完成运行
beforeMount onBeforeMount 3在模板挂载之前运行
mounted onMounted 4在模板挂载完成以后运行
beforeUpdate onBeforeUpdate 5在内容有改变之前运行
updated onUpdated 6在数据改变完以后运行
beforeUnmount onBeforeUnmount 7在组件销毁之前运行
unmounted onUnmounted 8组件销毁后执行
errorCaptured onErrorCaptured 出现错误时运行
renderTracked onRenderTracked 渲染的时候可以追踪页面上所有方法跟变量
activated onActivated 缓存组件,激活时调用
deactivated onDeactivated 缓存组件,停用时调用

setup是组合式api的语法糖,在里面获取数据不用this。
ref和reactive申明变量的区别，ref适合于定义单一简单的数据，比如数字类型和字符串类型。reactive适合于申明复杂的数据类型，比如数组和对象。ref=复制toRef=引用,ref只响应式一层数据，reactive响应式数据是多层。

  1. <script setup lang="js">
  2. // 1.所有编写在顶层中的代码, 都是默认暴露给template可以使用
  3.     import {
  4.     ref,//定义基础类型数据
  5.     reactive,//定义对象数组
  6.     toRef,//但有了toRef后就可以在return中定义数据名称，使用toRef转换为ref的响应式基本数据，在模板中就不用再繁琐的加对象名，并且是双向绑定，模板中的修改也会影响到原对象
  7.     toRefs,//将对象第一层的属性都转换为ref基本类型所以用到ES6的语法将这些基本类型都展开来,注意!!!只会将第一层转换为ref基本类型。toRefs 解构完成对象的属性还具有响应式，对象的属性是ref，而unref 解构后就不具有响应性
  8.     unref,//toRefs 与 unref 都是将响应式对象转成普通对象(解构)，toRefs针对的是复杂对象，unref针对基础数据类型，
  9.     onMounted,//生命周期
  10.     onUnmounted,//生命周期
  11.     computed,//计算属性
  12.     nextTick,//修改了标签的文字内容后,可以在状态改变后立即使用,通过dom元素获取它元素
  13.     watch,//需要手动指定侦听的数据源，数据变化时执行其回调函数,默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调
  14.     watchEffect,//当监听到某些响应式数据变化时，我们希望执行某些操作,用于自动收集响应式数据的依赖
  15.     isRef,//判断是不是ref数据
  16.     isReactive,//判断是不是reactive数据
  17.     toRaw,
  18.     readonly,//将响应式数据变回原使数据
  19.     provide,//适用父组件，被后代组件注入，适用于组件跨级通信，例如在父组件中改变值后provide(name:'张三'),把name提供出去，类似于父组件传参。
  20.     inject,//后代组件依赖注入，所有后代组件const name = inject("name")接收值，类似于子组件接收参数。
  21.     shallowRef,//ref的浅层作用形式,常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。
  22.     customRef,//创建一个防抖ref,官网有示例。
  23.     markRaw,//将一个对象标记为不可被proxy转为代理。返回该对象本身，不是响应式的。
  24.     shallowReactive,//shallowReactive和markRaw一样都是浅层函数，但是根级别的属性是响应式，{name:'snake',age:{age2:18}}name为根,age里面还有对象，就不是响应式。
  25.     shallowReadonly,//shallowReadonly和shallowReactive差不多，但是根级别的属性是只读，根以下的可以改，但是不能渲染。
  26. } from 'vue';//引入VUE功能
  27.     import {
  28.         useRoute,//路由
  29.         useRouter,//路由器
  30.         onBeforeRouteLeave,//组件路由，路由更新前执行
  31.         onBeforeRouteUpdate//组件路由，路由更新后执行
  32.     } from 'vue-router';//组合式写法引入路由
  33.     import { useStore } from 'vuex'//引入vuex
  35. // 2.定义响应式数据
  36.     const props = defineProps({//defineProps()子组件接收父组件的值，函数的返回值是一个只读属性，只能使用，不能修改。
  37.       name: {type: String,default: "默认值"},
  38.       age: {type: Number,default: 0}
  39.     })
  40.     const router = useRouter();
  41.     const date = ref('');//定义date变量的value值
  42.     const show = ref(false);//修改的响应式数据，是不会影响到原始数据的
  43.     const num = ref(0);//通过test.value改变值,原因:本质是ref({value:0})
  44.     const boj = reactive({name:'张三'});//用reactive定义变量，就算把const改成let，也只有obj对象的形式,才会响应式数据变化,数字和字符串不会响应式变化。
  45.     const ob = { name: '张三', age: 18 }
  46.     const to = toRef(ob,'name')//用toRef定义变量，修改to的数据ob是会发生变化，但视图不会变化。一般适合于返回数据return {names:toRef(ob,'name'),ages:toRef(ob,'age')}，如果有多个数据可以用toRefs一次性返回，return {...toRefs(ob)},模板直接用属性名访问。
  48. // 3.定义绑定的函数
  49.     function add(){
  50.         val.value+=1
  51.     }
  52.     fuction tobut(){
  53.         to.value = '李四'//这里访问ob和to虽然都是李四，但是html并不会渲染。
  54.     }
  55.     function test(){
  56.         router.push({name:'xiang',params: {user:'按钮小张zhang'}})
  57.         //router.push({path:'/xiang',query: {user:'按钮小张zhang'}})
  58.     }
  59.     //defineEmits()函数去发出事件，从而给父元素传递一些信息,绑定函数, 并且发出事件
  60.     const emits = defineEmits(["infoBtnClick"])
  61.     function showInfoBtnClick() {
  62.       emits("infoBtnClick", "showInfo内部发生了点击")
  63.     }
  65.     defineExpose({//子组件把test函数暴露出去给父组件使用。
  66.       test
  67.     })
  68. //<zhapi ref="showInfoRef"></zhapi>
  69.     const showInfoRef = ref()
  70.     function show(){showInfoRef.value.test()}
  72. // 4.获取组件实例
  73.     const val = computed({//计算属性set，get写法
  74.         set:() => num.value,// 进入当前页执行，只能读取数据后返回。
  75.         get:() => num.value+1// 能够修改val的数据执行，然后再执行set读取。
  76.     });
  77.     const val = computed(() => num.value);//计算属性默认set写法
  78.     onMounted(() => {
  79.       console.log('模板挂载完成生命周期')
  80.     })
  81.     onBeforeRouteLeave((to, from) => {
  82.         let answer= window.confirm(` 你确定要从${from.fullPath} 到${to.fullPath}`);
  83.         if (!answer) return false
  84.     })
  86.     let count = ref(1)
  87.     let count1 = ref(2)
  88.     watch(count,(newV,oldV)=>{//单个监听
  89.       console.log(newV,oldV);
  90.     })
  91.     watch([count,count1],(newV,oldV)=>{//多个监听
  92.       console.log(newV,oldV);
  93.     },{
  94.     immediate:true,//immediate当打开页面时候立即监听，可选。
  95.     deep: true//如果是对象，对象嵌套很深需要开启深度监听，oldV监听不到。
  96.     })
  97. </script>
  99. this.$route//路由
  100. this.$routes//路由器
  101. this.$route.push({path:'/xiang',query:{user:'query小张zhang'}})//query传参相当于GET，刷新页面后上一个页面传的数据还在。
  102. this.$route.push({name:'xiang',params:{user:'params小张zhang'}})//params传参相当于POST，刷新页面后上一个页面传的数据没有了。
  103. this.$route.replace()//和push使用方法一样，区别是重当前页面history记录打开，点击返回是返回上上个页面。
  104.     组合式写法

VUE3.2 script setup 语法糖，组件的 setup 会自动变成 async setup,组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写

import { nextTick } from ‘vue’ nextTick(()=>{})
import { useContext, defineProps, defineEmits } from ‘vue’
// defineProps 用来接收父组件传来的值props。
// defineEmits 用来声明触发的事件表。
// useContext 用来获取组件上下文context。
import { reactive } from ‘vue’//css 变量注入
const state = reactive({
color: ‘red’
})

import { onBeforeRouteLeave, onBeforeRouteUpdate } from ‘vue-router’
// 添加一个导航守卫，在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
next()
})

// 添加一个导航守卫，在当前组件更新时触发。
// 在当前路由改变，但是该组件被复用时调用。
onBeforeRouteUpdate((to, from, next) => {
next()
})
props//组件用props接收参数
$emit//子组件内置$emit()方法，

组合式是api
路由跳转<router-link :to="{path:'/xiang:a=123',params:123}">详情</router-link>//path可以改为name

上一条：7个加速搜索引擎收录网站实用有效方法下一条：课程表练习和表单练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多