关于前端:Vue3-Ts-笔录

仅集体应用 + 繁难了解笔录

根底搭建

npm install -g @vue/cli

yarn global add @vue/cli

创立我的项目

vue create projectName

注：vue2.0 降级到 vue3.0

vue add typescript

组件与组件依赖变大，组件难读取或保护
不能更好的解决跨组件代码重用

1. 用于否

可不必状况 Composition Api 来编写组件，也能够不必此 api 来做组件

2. 用此 api 状况

TypeScript 反对

大型组件，Composition Api 组合可很好的治理状态

跨组件代码重用

3. steup 繁难介绍

setup 是用来配置组件状态的另一种实现。

在 setup 中定义的状态，办法要想在模板中应用，必须 return

setup: () => {const list = ref([])

    // 赋值
    list.value = []

    return {list}
}

特地留神：

setup 办法是在 [components , props data Methods Computed Lifecycle methods] 之前执行

setup 中无法访问 this

4.ref 创立响应式变量

之前 Vue2 中，定义一个响应式变量间接在 data 中定义即可。

而应用 composition api，咱们得在 setup 中应用 ref 来创立响应式变量，并且得将它返回，能力在页面中应用。

应用示例

import {ref} from 'vue'
// 初始化变量
const test = ref('默认值')
// 赋值 
test.value = 'kai shi ....'
// 返回 (可返回办法)
return {test}

理论应用栗子

<template>
    <div>
        <h1>{{test}}</h1>
    </div>
</template>

<script>
import {ref,defineComponent} from 'vue'
export default defineComponent({setup () {
        // 定义响应式变量
        const test = ref('栗子')
        
        // 输入
        console.log(test.value)

        // 变量赋值
        test.value = '来个新的值'
        // 返回变量
        return {test}
    }
})
</script>

5. 生命周期

Composition Api 生命周期钩子与 vue2.0 一样只是多了一个前缀 on

vue2.0 生命周期
    beforeCreate: function() {console.log('Before Create');
    },
    created: function() {console.log('Created');
    },
    beforeMount: function() {console.log('Before Mount');
    },
    mounted: function() {console.log('Mounted');
    },
    beforeUpdate: function() {console.log('Before Update');
    },
    updated: function() {console.log('Updated');
    },
    beforeDestroy: function() {console.log('Before Destroy');
    },
    destroyed: function() {console.log('Destroyed');
    }

onMounted 在 mounted 之前执行

对照表

| 选项式 API | Hook setup |

beforeCreate
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

6.setup 中应用 watch 响应式更改

// 引入
import {watch} from ‘vue’

// 它有三个参数

要监听更新的响应式援用或者 getter 函数
一个回调用来做更新后的操作
可选配置项

<template>
    <div>
        {{count}}
    </div>
</template>
<script lang="ts">
    import {ref, watch} from 'vue'
    
    export default defineComponent({
        name: 'Demo',
        data() {return {}
        },
        setup(props) {const count = ref(10)

            setTimeout(() =>{count.value = 20})

            watch(count,(nVal, oVal) =>{console.log(` 新值：${nVal} 旧值：${oVal}`) // 新值：20 旧值：10
            })

            return {count,}
        }
    })
</script>

7.setup 中应用 computed
computed 是从 vue 导入，computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输入的一个只读的响应式援用。为了拜访新创建的计算变量的 value，咱们须要像应用 ref 一样应用 .value property

<template>
    <div>
        {{n}}
    </div>
</template>
<script lang="ts">
    import {ref, computed} from 'vue'
    
    export default defineComponent({
        name: 'Demo',
        data() {return {}
        },
        setup(props) {const count = ref(10)

            setTimeout(() =>{count.value = 20})

            const n = computed(() =>{return count.value})
            console.log(n.value)

            return {n,}
        }
    })
</script>

8. 对于 setup
1. 接管两个参数
  
  props : 父组件传递过去的属性, setup` 函数中 props 是响应式的，它会随着数据更新而更新，并且不能应用 ES6 解构，因为它会不能使 props 为响应式。
  
  context : 它是一个一般的对象，它裸露 3 个组件的· property, context 不是响应式，可用 es6 解构解析
  
  Attribute(attrs)
  
  插槽 (slots)
  
  触发事件

<template>
    <div>
        
    </div>
</template>
<script lang="ts">    
    export default defineComponent({
        name: 'Demo',
        props:{
            list:{
                type: Object,
                default: {}}
        },
        data() {return {}
        },
        // 1
        setup(props, context) {console.log(`props:---- ${JSON.stringify(props)}`)

            console.log(`context:---- ${JSON.stringify(context)}`)
            // 解构解析
            const {attrs, slots, emit} = context
        },
        // 2 
        setup(props, {attrs, slots, emit}) {console.log(`props:---- ${JSON.stringify(props)}`)

            console.log(`context:---- ${attrs}`)
            console.log(`context:---- ${slots}`)
            console.log(`context:---- ${emit}`)
        },
    })
</script>

组件加载 setup 时注意事项

在组件执行 setup 时，组件实例没有被创立，无法访问以下属性:

data

computed

methods

9. 跨组件传值

Vue2 中能够应用 Provide/Inject 跨组件传值，Vue3 中也能够。

setup 中应用

应用 Provide
1. 用 ref / reactive 创立响应式变量
2. 用 provide(‘name’, ‘ 要传递的响应式变量 ’)
3. 增加一个更新响应式变量的事件，这样响应式变量更新，provide 中的变量也跟着更新

父组件

<template>
 <div>
   <Child/>
   <button @click="abc">abc</button>
 </div>
 
</template>

<script lang="ts">
   import {provide, defineComponent, ref, reactive} from "vue";

   import Child from './child.vue'

   export default defineComponent({
       components:{Child},
       methods: {abc() {
               // 更新 time 值
               this.changeProvide(new Date().getTime()) // 扭转值
           },
       },
       setup() {const list = ref("父组件");
           const testInfo = reactive({
               id: 100,
               msg: "一个栗子",
           });
           function changeProvide(t){testInfo.msg = t}
           provide('list',list)
           provide('test',testInfo)
           return {changeProvide};
       }
   
})
</script>

子组件

<template>
   <div>
       <h1>{{test.msg}}</h1>
       <h1>{{listData}}</h1>
   </div>
</template>

<script lang="ts">
import {provide, defineComponent,ref,reactive, inject} from 'vue'
export default defineComponent({setup () {const listData = inject('list')
       const test = inject('test')
       return {listData,test}
   }
})
</script>

10.TypeScript 应用

应用接口束缚类型 interface

<template>
   <div>
       <ul>
           <li>
               {{page}}
           </li>
       </ul>
   </div>
</template>

<script lang="ts">

interface queryParams{
   page: Number,
   size: Number,
   data: Object,
   total:  Number
}

export default defineComponent({data() {
       return{
           page:{
               page: 1,
               size: 10,
               data: {},
               total: 10,
           } as queryParams
       }
   }
})
</script>

reactive 应用
reactive（）函数接管一个一般对象，返回一个响应式的数据对象

<template>
<div>
    <ul>
        <li>
            {{list}}
        </li>
    </ul>
</div>
</template>

<script lang="ts">
interface Obj {
name: String,
id: String,
address: String
}

import {defineComponent, reactive} from "vue"

export default defineComponent({setup(props) {const list = reactive({name:'一个栗子', id: 21, address:'192.168.1.110'}) as Obj

    return{list}
}
})
</script>

ref 与 reactive

ref 只能够监听简略数据，reactive 能够监听所有数据

ref 批改数据须要应用这样 count.value=xxx 的模式，而 reactive 只须要 ref 批改数据须要应用这样 count. 属性名 = 值这样来应用

reactive 在 return 时候须要 toRefs 来转换成响应式对象

reactive 应用
<template>
<div>
    <ul>
        <li>
            {{page}}
            {{id}}
        </li>
    </ul>
</div>
</template>

<script lang="ts">

import {defineComponent, reactive, toRefs} from "vue"

export default defineComponent({setup(props) {const list = reactive({name:'一个栗子', id: 21, address:'192.168.1.110'}) as Obj

    // 扭转值
    list.id = 999
    return{...toRefs(list),
    }
}
})
</script>

### 对于 interface 用法

https://www.cnblogs.com/xch-j…

关于前端:Vue3-Ts-笔录

Vue3.0 + Ts

环境配置

vue2.0 存在许些问题

vue3.0 API