乐趣区

关于vue3:vue30的入门使用

jiezi

1.createApp // 顾名思义，创立一个 APP 实例 

// 先导入 createApp 模块
import {createApp} from 'vue';
import App from './App.vue';

// 应用 createApp 办法将咱们的入口文件放进去，最初挂载
createApp(App).mount('#app');

2.onMounted // 跟之前的写法不一样了不过，多了一个 on

// 先导入 onMounted 模块
import {onMounted, defineComponent} from 'vue';

export default defineComponent({setup () {
        // 应用的时候须要放在 setup 里边
        onMounted(() => {console.log('组件挂在完结开始打印。。。')
        })
    }
})

3.computed 计算机属性 

import {computed, ref} from 'vue';

// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 谬误！
import {computed, ref} from 'vue';

// 能够批改值
const count = ref(1)
const plusOne = computed({get: () => count.value + 1,
  set: (val) => {count.value = val - 1},
})

plusOne.value = 1
console.log(count.value) // 0

4.watch 监听器 

import {reactive, watch} from 'vue';
// 侦听一个 getter
const state = reactive({count: 0})
watch(() => state.count,
  (count, prevCount) => {/* ... */}
)

// 间接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {/* ... */})

5.watchEffect 监听器的降级版本，立刻执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时从新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

进行侦听, 当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时主动进行。

const stop = watchEffect(() => {/* ... */})

// 之后
stop()

6.reactive 接管一个一般对象而后返回该一般对象的响应式代理。等同于 2.x 的 Vue.observable(), 留神在源码中明确显示须要传递一个对象，否则会抛出异样，如果想要对一个独自的变量应用响应式，能够应用 ref 下边介绍 

const obj = reactive({count: 0}) // 返回的就是响应式对象
// 应用
obj.count ++
console.log(obj.count) // 输入的是 1

如果想要在组件内应用这个变量须要在 setup 中返回

第一种返回模式 

<template>
    <!-- 这种模式在组件内应用的时候须要 obj.count -->
    <p>{{obj.count}}</p> 
</template>
import {reactive} from 'vue';

export default defineComponent({setup () {const obj = reactive({ count: 0})
        return {obj} // 这种模式在组件内应用的时候须要 obj.count
    }
})

第二种返回模式 

<template>
    <!-- 这种模式在组件内应用的时候跟之前一样 -->
    <p>{{count}}</p> 
</template>
import {reactive, toRefs} from 'vue';

export default defineComponent({setup () {const obj = reactive({ count: 0})
        return {...toRefs(obj) }
    }
})

7.toRefs 把一个响应式对象转换成一般对象，该一般对象的每个 property 都是一个 ref，和响应式对象 property 一一对应。

import {reactive, toRefs} from 'vue';

export default defineComponent({setup () {const obj = reactive({ count: 0})
        return {...toRefs(obj) }
    }
})

8.ref 承受一个参数值并返回一个响应式且可扭转的 ref 对象。ref 对象领有一个指向外部值的繁多属性 .value。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

9.toRef 能够用来为一个 reactive 对象的属性创立一个 ref。这个 ref 能够被传递并且可能放弃响应性。

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

10.nextTick

import {nextTick} from 'vue';

export default defineComponent({setup () {nextTick(() => {console.log('--- DOM 更新了 ---')
        })
    }
})
退出移动版