Quasar2.0与vue3.0项目中问题2

一、computed的使用

1.引入
import { computed,reactive, onMounted,} from "vue";
2.在setup中使用
let getTagView = computed(() => {
      return store.getters["userModule/getTagView"];
    });
3.在retrun中添加  getTagView
 

可用于监听data中数据变化、以及vuex中数据变化，会对数据的改变做出响应

二、watch的使用

1）基本数据类型

import { ref, watch } from 'vue' 
const count = ref('王五') 
watch(count, (newValue, oldValue) => {
  //要执行的操作
})

2）监听复杂类型数据

import { reactive, watch } from 'vue'
const state = reactive({ 
   count: [] })
watch(() => state.count, (newValue, oldValue) => {
    .....
})

3)监听多个基本类型

import { ref, watch } from 'vue' 
const count = ref(0) 
const count2 = ref('张三') 
写法一：
watch([count, count2], ([newCount, newCount2], [oldCount, oldCount2]) => { 
     ....
})
写法二：
watch([count, count2], (newValue, oldVlaue) => {
    。。。。
})

4)监听多个复杂类型数据

 import { ref, watch } from 'vue' 
    watch(()=>data.roles,(n, o) => {
        console.log( n, o);
      },{ //深度监听
         immediate: true, deep: true
      }
    );
    watch(()=>data.baseR,(n, o) => {
        console.log(" n, o);
      },
      { immediate: true, deep: true}
    );

5）监听路由变化

import { onBeforeRouteUpdate } from "vue-router";
onBeforeRouteUpdate(to => {
      console.log(to, "=====");
});

三、模板引用

  即vue2.0中this.ref获取dom标签

<template> 
  <div ref="root">This is a root element</div></template>
<script>
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const root = ref(null)
      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })
      return {
        root }
}}
</script>

   在渲染上下文中暴露root，并通过ref=”root”,将其绑定到div作为其ref。在虚拟dom补丁算法中，若Vnode的ref键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值。这是在虚拟 DOM 挂载/打补丁过程中执行的，因此模板引用只会在初始渲染之后获得赋值，即在onMounted生命周期中。

四、路由内容变化

 传参和原来一样，取参发生改变：
 Params传参：
 <router-link to="/home/111">点击跳转到home页面并传参</router-link>
 vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
 console.log(route.params.id);//111
 query传参：
 <router-link to="/test?id=999">test</router-link>
    //接受的时候
   import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999
 Js传参方式:
 import { useRouter } from 'vue-router'
    const route = useRouter()
            route.push({
                path:"/lianxi",
                query:{
                    id:666
                }
            });
             route.push({
                name:'lianxi',
                params:{
                    id:666
                }
            });
   import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999