测试笔记

• 测试

刚刚刚刚

刚刚

• 刚刚测试一条笔记
• 测试一下笔记
• 刚刚刚刚测试笔记

添加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优势

1. 性能优化：虚拟DOM、编译模板、Proxy的新数据监听、更小的打包文件；

2. composition-api：新的组合式API，适合大型项目；

3. 对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 安装