vue3.0学习总结

vue3.0常用属性

一、安装

csdn

<script src="https://unpkg.com/vue@next"></script>

npm

在用 Vue 构建大型应用时推荐使用 npm 安装[1] 。NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue 还提供了编写单文件组件的配套工具。

# 最新稳定版
$ npm install vue@next

二、生命周期

3.0生命周期

beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

setup 是 Composition API 的核心，能够说也是整个 Vue3.x 的核心。
setup 就是将 Vue2.x 中的 beforeCreate 和 created 代替了，以一个 setup 函数的形式，能够灵活组织代码了。

beforeCreate -> setup()
created -> setup()

export default({
	setup () {
		onMounted(() => {
		 
		})
    	return {}
    }
})

三、响应式数据（ref、reactive）

1. reactive:

被 reactive 方法包裹后的对象就变成了一个代理对象，也就能够实现页面和数据之间的双向绑定了。

这个包裹的方法是 deep 的，对全部嵌套的属性都生效。

<template>
    <div>
        <p>普通数据：{{ obj1.cnt }}</p>
        <p>响应式数据：{{ obj2.cnt }}</p>
    </div>
</template>

<script>
import { reactive } from 'vue'
setup() {
    // 普通对象
    const obj1 = {
        cnt: 1
    }
    // 代理对象（这种方式定义的数据可在页面上实时变化）
    const obj2 = reactive({
        cnt: 1
    })
    obj1.cnt++
    obj2.cnt++
    return {
        obj1,
        obj2
    }
}
</script>

2. ref方法
被 ref 方法包裹后的 元素 就变成了一个代理对象，这里的元素参数指 基本元素 或者称之为 inner value，如：number, string, boolean,null,undefied 等，object 通常不使用 ref，而是使用上文的 reactive。

<template>
    <div>
        <p>{{ num}}</p>
    </div>
</template>

<script>
import { reactive } from 'vue'
setup() {
    // 代理对象
    const num = ref(1)

    return {
        num
    }
}
</script>

四、computed的用法

let num = ref(1)
const text = computed(() => {
    return num.value
})

computed还有get、set方法

let firstName = ref('zhang')
let lastName = ref('hai')
const fullName = computed({
  get: () => firstName.value + lastName.value,
  set: (val) => {
      firstName.value = val
  }
})
fullName.value = 'Lin'

五、父子组件通信

子组件：my-child

<template>
  <div @click="onChange">给父组件传递事件</div>
</template>

<script>
import { ref } from 'vue'
export default{
 setup(props, { emit }){
 	let onChange = () => {
		emit('change', "我是子组件的事件") // 子组件触发事件
	}
	let startTime = ref(null)
	let changeDate = () => {
		startTime.value = "2021-10-11"
	}
	return {
	  onChange
	}
 }
}
</script>

• 使用场景1:父组件接收子组件事件

<template>
  <my-child @change="receiveMes"></my-child>
</template>

<script>
import myChild from './my-child.vue'
export default{
  components:{ myChild },
  setup(props, { emit }){
 	let receiveMes= (e) => {
		console.log(e)
	}
	return {
	  receiveMes
	}
 }
}
</script>

• 使用场景2:父组件调用子组件方法

<template>
  <my-child ref="childDom"></my-child>
</template>

<script>
import { ref } from 'vue'
import myChild from './my-child.vue'

export default{
  components:{ myChild },
  setup(props, { emit }){
 	let childDom = ref(null) //获取子组件
 	childDom.value.changeDate()
	return {}
 }
}
</script>

六、watch的用法

监听props对象：

export default{
  props:{
	dataProvider
  }
  setup(props, { emit }){
 	watch(() =>props.dataProvider,(newVal, oldVal)=>{
	   //do something  
	})
	return {}
 }
}

深度监听

export default{
  props:{
	dataProvider
  }
  setup(props, { emit }){
 	watch(() =>props.dataProvider,(newVal, oldVal)=>{
	 //do something  
	}, { deep:true })
	return {}
 }
}

监听响应式对象：

export default{
  setup(props, { emit }){
  	let count = ref(1)
 	watch(count,(newVal, oldVal)=>{
	   //do something  
	})
	return {}
 }
}

监听多个对象：

import { ref, reactive} from 'vue'
export default{
  props:{
	dataProvider
  }
  setup(props, { emit }){
   	let startTime = ref(null)
  	let tab = reactive({
  		datas:null,
  		selTab: null
  	})
	let getData = () => {
	  	return '1111'
	}
	//写法1
 	watch(() => {
      return [startTime.value,  tab.selTab]
	},(val,prev) => {
	   getData () 
	})
	//写法2
	watch([startTime.value,  tab.selTab],(val,prev)=>{
		getData () 
	})
	return {}
 }
}

七、slot传参

1. 不具名插槽传参

子组件：

<template>
    <div>
        <h4>子组件</h4>
        <slot :sName="name"></slot>
    </div>
</template>

父组件：

 <div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot="dataDefalut">//默认插槽
                {{dataDefalut.sName}}
            </template>
        </testChild>
    </div>

2. 具名插槽传参

子组件

<template>
    <div>
        <h4>子组件</h4>
        <slot name="test" :list2="list2"></slot>
    </div>
</template>

父组件

 <div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot:test="data">//具名插槽，v-slot: +插槽名+ ="自定义数据名"，子组件所传参数都是其属性
                <ul>
                    <li v-for="item in data.list2">{{item.name}}</li>
                </ul>
            </template>
        </testChild>
 </div>

八、DOM元素获取

<template>
    <div ref="containerDOM">DOM元素获取</div>
</template>

<script lang="ts">
import { ref} from 'vue'
export default{
  props:{
	dataProvider
  }
  setup(props, { emit }){
   	let containerDOM= ref(null)
   	//使用的时候写成  containerDOM.value
  	return { containerDOM }
 }
}
</script>

九、路由获取

<script>
  import { getCurrentInstance } from 'vue'
 
  export default {
    setup () {
      const { ctx } = getCurrentInstance()
      let value = ctx.$router.currentRoute.value
      console.log(value)
    }
  }
</script>

Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文