vue3.0知识复盘

256 阅读3分钟

1. 过渡与动画

1.1 列表过渡

1.1.1 普通列表过渡

tag标签表示渲染的节点是哪个

<transition-group name="list" tag="p">
  <p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>
1.1.2 改变列表过渡定位

在列表过渡中,有一个move类,可以改变定位(改变元素一开始的位置)。设置方法有两种(.name-move,move-class="name") 使用_.shuffle()方法

<button @click="shuffle">shuffle</button>
<transition-group name="list" tag="p">
  <p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>

shuffle(){
    this.items = _.shuffle(this.items)
}

.list-move {
    transition: all 1s ease;
}
1.1.3 更复杂一点的列表过渡

结合js钩子的同时还可以使用gsap动画

1.1.4 复用列表过渡

类似子组件

1.1.5 动态过渡
<transition-group :name="names" tag="p">
  <p v-for="(item, index) in items" :key="index">{{item}}</p>
</transition-group>

1.2 状态过渡

可以针对以下一些情况

  • 数字和运算
  • 颜色的显示
  • SVG 节点的位置
  • 元素的大小和其他的 property

2. 组合式API composition API (重点:将同一个逻辑关注点相关代码收集在一起会更好)

2.1 简介

是接受参数并将其包裹在带有value property的对象中返回,然后使用该property访问或改变响应式变量的值

computed 计算属性也是响应式,但是不可更改,只可读

watch 三个参数(响应式引用/getter函数,回调,可配置选项)

2.2 setup两个参数 (props context)

2.2.1 props:响应式的,需要使用toRefs来解构

获取上下文传递的值,props:[]

setup(props) {
    const { title } = toRefs(props)
    console.log(title)
}
2.2.2 context 普通的js对象 非响应式

类似this, 只可以访问以下:

  • context.attrs
  • context.slots
  • context.emit
   // Attribute (非响应式对象,等同于 $attrs)
   
    console.log(context.attrs)

   // 插槽 (非响应式对象,等同于 $slots)
   console.log(context.slots)

   // 触发事件 (方法,等同于 $emit)
   console.log(context.emit)

   // 暴露公共 property (函数)
   console.log(context.expose)

2.3 生命周期

image.png

2.4 provide / inject

import { provide } from 'vue'
setup() {
    provide('name', value)
}
import { inject } from 'vue'
const item = inject('name',?'default')
//上述还没有有响应式 不会继承 provide里面的值变了,但是inject不会变
//添加readonly表示只读,不可修改
provide('name', readonly(value))

2.5 模板引用 即在父组件中通过ref获得子组件的值

记住ref的使用方法 (容易忘!!!!!!!)

<div>
   <Child ref="child"></Child>
</div>
setup() {
    const child = ref(null)
    onMounted(() => {
        consoloe.log(child.value) 
    }) 
    return { // 一定不要忘记return
        child
    }
}

// 1.child.value的值除了在created之前获取不到,其他都可以
// 2.可以多次使用ref,但不要忘记return

2.6 Mixin 混合

2.6.1 基础用法
//在我的组件就可以使用mixin里的所有方法了
const myMixin = {
    created() {
        this.hello()
    },
    methods: {
        hello() { console.log('hello')}
    },
    data() {
        return {
            foo: 'foo'
        }
    }
}
<template></template>
mixins: ['myMinin']
2.6.2 选项合并

我的组件和mixin中一些属性重复了,

data:使用我的组件

事件钩子:mixin会在我的时间钩子之前执行

methods、components等:合并成同一个对象,如果键名冲突,则是用我的组件里面的

2.7 自定义组件

2.7.1 基础用法
 <input v-test></input>
 directive('test', {
     mouted(el) {
         el.focus()
     }
 })
2.7.2 事件钩子
directive('test', {
  // 指令是具有一组生命周期的钩子:
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
 })
 

三个参数 el,binding,vnode

el: 当前组件
binding:一个对象:
- instance:使用指令的组件实例。
- value:传递给指令的值。例如,在 v-my-directive="1 + 1" 中,该值为 2
- oldValue:先前的值,仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。
- arg:参数传递给指令 (如果有)。例如在 v-my-directive:foo 中,arg 为 "foo"
- modifiers:包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中,修饰符对象为 {foo: true,bar: true}
- dir:一个对象,在注册指令时作为参数传递。
vnode:上面作为 el 参数收到的真实 DOM 元素的蓝图

2.7.3 动态指令参数
  <div v-pin:[direction]="200">距{{direction}}距离为200px</div>
  app.directive('pin', {
       mounted(el, binding) {
           const s = binding.arg || 'top'
           el.style[s] = binding.value + 'px' 
       }
  })
  data() {
       return {
           direction: 'right'
       }
  }

函数简写
mounted和updated触发相同行为

app.directive('pin', {
    mounted(el, binding) {
        const s = binding.arg || 'top'
        el.style[s] = binding.value + 'px' 
    }
})

2.8 Teleport

2.8.1 基础用法

没看明白

2.9 渲染函数

2.9.1 基础用法