关于前端:Vue3-Ts-笔录

Vue3.0 + Ts

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

环境配置

1. 根底搭建

npm install -g @vue/cli

yarn global add @vue/cli

2. 创立我的项目

vue create projectName

注：vue2.0 降级到 vue3.0

vue add typescript

vue2.0 存在许些问题

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

vue3.0 API

• 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’

// 它有三个参数

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

<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>

2. 组件加载 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 应用

1. 应用接口束缚类型 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>

2. 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>

   3. 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…