Vue3.x——新特性

p18（2021.4.14 周三）

1.Composition API简介

1. Composition API 也叫组合式API，是vue3.x的新特性。

2. 没有Composition API之前vue相关业务的代码需要配置到option的特定区域（data、methods、computed……），中心型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码的复用性不高。Vue3.x中的Composition API就是为了解决这个问题而生的。

2.Composition API提供了以下几个函数

setup
ref
reactive
watchEffect
watch
computed
toRefs

3.Composition API定义变量

<h1>vue3新特性</h1>
{{title}}---{{companyInfo}}

import { ref, reactive } from 'vue';

export default {
	setup() {
		// ref        定义响应式数据   	string、number、boolean、array
	    // reactive   定义响应式数据      定义对象
	    
	    const title = ref("我是vue3");
	    const companyInfo = reactive({
	      name: '公司',
	      area: 'hz'
	    });
	
	    return {
	      title,
	      companyInfo
	    }
	
	  }
}

4.Composition API定义方法 及 对变量的使用

reactive定义的对象可以直接用，但是ref定义的需要.value

setup() {
    const getTitle = () => {
      console.log(title.value)
    }

    const getCompanyInfo = () => {
      console.log(companyInfo);
    }

    return {
      getTitle,
      getCompanyInfo
    }
    
  }

5.toRefs —— 解构响应式对象数据

把一个响应式对象转成普通对象，该普通对象的每个 property 都是一个 ref，和响应式对象 property —— 对应。

import { ref, reactive, toRefs } from 'vue';

setup() {
	const companyInfo = reactive({
      companyName: '公司',
      area: 'hz'
    });
    
	return {
      ...toRefs(companyInfo)
    }
    
}

companyName 就是一个响应式数据

<input v-model="companyName" />
{{companyName}}

p19（2021.4.15 周四）

1.computed计算属性

姓：<input v-model="firstName" />
名：<input v-model="lastName" />
姓名：{{fullName}}

import { reactive, toRefs, computed } from 'vue';

setup() {
	const userInfo = reactive({
      firstName: '',
      lastName: ''
    });

	const fullName = computed(()=> {
      return userInfo.firstName + userInfo.lastName
    })
    
	return {
      ...toRefs(userInfo),
      fullName
    }
    
}

2.readonly “深层”的制只读代理

把响应式对象改为普通对象

<input v-model="userInfo2.firstName" />
{{userInfo2.firstName}}   // 非响应式的

import { reactive, readonly } from 'vue';

setup() {
	const userInfo = reactive({
      firstName: '',
      lastName: ''
    });

	const userInfo2 = readonly(userInfo)
    
	return {
      userInfo2
    }
    
}

3.watchEffect 和 watch

watchEffect：会在第一次就触发

对比watchEffect， watch允许我们：

1. 懒执行，也就是说仅在监听的数据变更时才执行回调（第一次不触发）
2. 更明确哪些状态的改变会触发侦听器重新运行（obj）
3. 访问侦听状态变化前后的值（newVal, oldVal）

<p>num:{{num}}</p>
<p>count:{{count}}</p>

import { reactive, toRefs, watchEffect , watch} from 'vue';

setup() {
	const obj = reactive({
      num: 1,
      count: 1
    });

    watchEffect(()=> {
      //console.log(`num=${obj.num}`)  // 由于num++，所以会一直触发
      
      console.log(`num=${obj.count}`)  // 只会触发第一次
    })

	// 监听整个obj对象，由于num++，整个对象一直在改变，所以会一直触发
	 watch(obj, (newVal, oldVal)=> {
      console.log(`watch: num=${obj.count}`)
    })

    setInterval(() =>{
      obj.num++
    }, 1000)
    
	return {
      ...toRefs(obj)
    }
    
}

4.生命周期函数

因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显示的定义他们，换句话说，在这些钩子中编写的任何代码都应该直接在setup函数中编写。

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

import { onMounted } from 'vue';

setup() {
	onMounted(() => {
      console.log("onMounted")
    })
}

5.接收父组件的传值props

export default {
	props: ['msg'],
	setup(props) {
		console.log("props");
	}
}

p20（2021.4.18 周六）

1.provide / inject

从父组件传递数据到子组件，使用props。如果有一些深嵌套的组件，而我们只需要来自深嵌套子组件中父组件的某些内容，就可以使用provide / inject，父组件有一个provide选项来提供数据，inject选项来开始使用这个数据。

2.vue2和vue3中 provide / inject区别

vue2：父组件的数据改变后，不会影响子组件的数据（基本类型的不会相互影响，但是引用类型的会相互影响）

vue3：父组件的数据改变后，直接影响子组件的数据（基本类型、引用类型都会）

3.非组合式api中的写法

父组件：

<template>
	<provide-demo />
</template>

<script>
import ProvideDemo from './ProvideDemo.vue';

export default {
	provide() {
	    return {
	      userInfo: this.userInfo
	    }
  	},
  	
	data() {
		return {
			 userInfo: {
		        name: '张三',
		        age: ''
		      },
		}
	}

}
</script>

子组件：ProvideDemo.vue

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

<script>
export default {
    inject: ['userInfo'],
}
</script>

4.组合式api中的写法

父组件：

<template>
	<div>
		<p>{{provideTitle}}</p>
	    <input v-model="provideTitle" />
		<provide-demo />
	</div>
</template>

<script>
import { ref, provide } from 'vue';
import ProvideDemo from './ProvideDemo.vue';

export default {
	setup() {
		const provideTitle = ref("我是根组件的title");
    	provide("provideTitle", provideTitle);

		return {
			provideTitle 
		}
		
	}
}
</script>

子组件：ProvideDemo.vue

<template>
    <div>
        <p>vue3--provide:{{provideTitle}}</p>
    </div>
</template>

<script>
import { inject } from 'vue' 
export default {
    setup() {
        const provideTitle = inject("provideTitle");
        return {
            provideTitle
        }
    }
}
</script>