-
测试笔记
-
测试
刚刚刚刚
刚刚查看全部 -
-
- 刚刚测试一条笔记
- 测试一下笔记
- 刚刚刚刚测试笔记
查看全部 -
受益匪浅，很好的一个视频查看全部
-
写笔记看看有没有
查看全部 -
添加ts的支持，先安装ts
vue add @vue/typescript
查看全部 -
使用vue3提供的defineComponent进行类型推断
import {defineComponent} from '@vue/composition-api' export default defineComponent({ components:{ }, setup(){ } })查看全部 -
使用
import ComPositionApi from '@vue/composition-ap'
Vue.use(ComPositionApi)
查看全部 -
安装组合式api
npm i -S @vue/composition-api
查看全部 -
1. 添加事件
const count = ref(0) const add = ()=>{count.value++} return {count,add}2. 副作用watchEffects
//初始化的时候就开始触发 watchEffect(()=>{ console.log(count.value) })3. 停止
const stop = watchEffect(()=>{ console.log(count.value) }) ... stop()//在需要停止的地方调用 ...4. 清除副作用
const stop = watchEffect(async(cancel)=>{ await new Promise(function(resolve,reject){ console.log(count.value) resolve() }) cancel(()=>{ conaole.log('cancel')//在异步前执行 }) })5. watch
watch(count,(count,preCount)=>{ console,log(count,preCount) })查看全部 -
computed
//方式一 const count = ref(0) const double = computed(()=>count.value * 2) ... count.value++ ... return {count,double} 方式二 const state = retactive({ count : 1, double : computed(()=>state.count *2) }) ... state.count++ ... return toRefs(state)查看全部 -
1. ref 和 reactive
const count = ref(0) const state = reactive({count}) ... state.count++ ... return {count}2. toRefs
const state = reactive({count:0}) const {count} = toRefs(state) ... state.count++ ... return {count}3. toRef
const state = reactive({count:0}) const count = toRef(state,'count') ... state.count++ ... return {count}查看全部 -
1. ref
const count = ref(0) ... count.value++ ... return {count}2. 使用
<div>{{count}}</div>查看全部 -
1. reactive
const state = reactive({ count : 0 }); ... count++ ... return {state}//返回对象2. 使用
<div>{{state.count}}</div>查看全部 -
1. 安装依赖
$ cnpm i -D @vue/composition-api
2. 使用
import Vue from vue import CompositionApi from '@vue/composition-api' Vue.use(CompositionApi)
查看全部 -
vue3.0优势
性能优化：虚拟DOM、编译模板、Proxy的新数据监听、更小的打包文件；
composition-api：新的组合式API，适合大型项目；
对TS支持更好；
查看全部 -
https://github.com/aisiqilove/vue3.0composition-api.git
整理出来的github
提供html和css
有vue2和vue3以及加上ts后的app.vue
查看全部 -
flush属性可以改变副作用执行顺序
副作用初始化在dom渲染之前执行，通过onMounted 中执行访问DOM/ref查看全部 -
flush属性可以改变副作用执行顺序
查看全部 -
清除副作用 异步处理
查看全部 -
stop() 副作用watchEffect 根据条件停止
查看全部 -
use函数，可以理解为功能逻辑函数，向外返回数据、方法 在setup中使用，即也可以给其他use函数使用
查看全部 -
生命周期必须在setup()函数中使用/调用
查看全部 -
const state = reactive({ count: 1 }); const { count } = toRefs(state); // toRefs把普通对象转化成ref()所对应的响应式数据 const { count } = toRef(state, 'count); // 指定数据转化 return { count };查看全部 -
reactive结合ref使用，定义响应式数据
const count = ref(0); const state = reactive({ count }) return { count }查看全部 -
css部分
查看全部 -
HTML部分
查看全部 -
vue cli 安装
查看全部
举报
0/150
提交
取消
