0
点赞
收藏
分享

微信扫一扫

【SQL】查找多个表中相同的字段

我是芄兰 2023-07-13 阅读 72

 vue3

 ref、reactive

toRefs

setup + ref + reactive 实现了数据响应式,不能使用 ES6 解构,会消除响应特性。所以需要 toRefs 解构,使用时,需要先引入。

let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
//运行为
let me = proxy : { single: true, want:"暖的像火炉的暖男" }

const { single, want } = toRefs( me )

toRef 

 toRef作用:将对象某一个属性,作为引用返回。

let me = reactive({
single:true,
want:"暖的像火炉的暖男"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//打印结果
ObjectRefImpl {
__v_isRef: true
_key: "love"
_object: Proxy {single: true, want: "暖的像火炉的暖男"}
value: undefined
[[Prototype]]: Object
}

 toRef 是组件之间进行传值值,对可选参数进行处理,运行时,先查看 me中是否存在 love ,如果存在时就继承 me 中的 love ,如果不存在时就创建一个 love ,然后解构赋值给变量 lv。

methods

props、context 

生命周期


script setup 

  1. 无需return向外暴露,无需set up
    <template>
     {{todoList}}
    </template>
    <script setup>
     let todoList = [
      {todo:"我想看海",isCheck:false},
      {todo:"我想浪漫",isCheck:true},
     ]
    </script>
    
  2. 无需注册component,引用即可用
    <template>
    <SetUp></SetUp>
    <set-up></set-up>
    </template>
    <script setup>
    import SetUp from "./SetUp.vue"
    </script>

    使用 defineProps 方法来获取props,取代setup中的props

  3. const props = defineProps({
    a: String,
    b: String
    })
  4. 获取 attrs、slots 和 emits(setup( props, context )接收两个参数,context 上下文环境,其中包含了属性、插槽、自定义事件三部分。)

    使用 script setup 语法糖时,

    <script setup>
    import { useAttrs, useSlots } from 'vue'
    const slots = useSlots();
    const attrs = useAttrs();

    const emits = defineEmits(['getChild']);
    </script>

    1. useAttrs 方法 获取 attrs 属性
    2. useSlots 方法获取 slots 插槽
    3. defineEmits 方法获取 emit 自定义事件
  5. 对外暴露属性

<template>
 {{msg}}
</template>

<script setup>
import { ref } from 'vue'

let msg = ref("Child Components");

// defineExpose无需导入,直接使用
defineExpose({
 msg
});
</script>

<template>
<Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue'

let child = ref(null);

onMounted(() => {
console.log(child.value.msg); // Child Components
console.log(child.value.num); // 123
})
</script>


Computed与watch

watch

import { watch } from "vue"
watch(
name ,
( curVal , preVal )=>{ //业务处理 },
options
)

共有三个参数,分别为:

  • name :需要帧听的属性
  • (curVal,preVal)=>{ //业务处理 } 箭头函数,是监听到的最新值和本次修改之前的值,此处进行逻辑处理。
  • options :配置项,对监听器的配置,如:是否深度监听。

页面刚进入的时候并不会执行,值发生改变的时候,才会打印出当前最新值和修改之前的值。

Computed


import { ref, computed } from "vue"
export default{
setup(){
const num1 = ref(1)
const num2 = ref(1)
let sum = computed(()=>{
return num1.value + num2.value
})
}
}

mixin混入(vue2)

mixin 对象把一些组件公用的选项,如data内数据,方法、计算属性、生命周期钩子函数,单独提取出来,然后在组件内引入,就可以与组件本身的选项进行合并。

<script>
const myMixin = {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
}
</script>

属性相同、同名方法

属性值相同时,优先继承实例内的值

命周期钩子函数执行顺序

生命周期函数会合并执行,优先执行 mixin 中的, 然后再执行实例中的

举报

相关推荐

0 条评论