关于Vue3的新特性

前言

没啥好说的，淦就完事了，按照自己的认知简单的整理了一下vue3新特性的笔记……

一、生命周期

import {onMounted} from 'vue'
export default {
  components:{
    NewComp
  },
  beforeCreate(){
    console.log('beforeCreate')
  },
  created(){
    console.log('created')
  },
  setup() {
    console.log('setup',this)//this输出为undefined，vue3取消了this关键字
    onMounted(()=>{
      console.log('mounted completed!')
    })
  }
}

查看控制台输出顺序：

setup undefined
beforeCreate
created
mounted completed!

结论：
全部使用 按需导入，且只能在setup()中使用
比beforeCreate，created先调用，这两个生命周期直接用setup()替代
其他周期都保留了，只是在命名方面稍有改变而已

二、setup()

• setup中没有this
• 在beforeCreate之前被调用
• setup函数是一个新的组件选项
• Vue2的data，生命周期，自定义函数都写在里面

1.ref和reactive区别

代码如下（示例）：

<template>
    <div>
        个人信息：{{ofData.name}} -- {{ofData.sex}} -- {{ofData.address}} -- {{age}}
        <button @click="UpdataData">点击修改姓名</button>
        
        <div>
            <button @click="decrease">-</button>
            {{count}}
            <button @click="add">+</button>
        </div>
    </div>
</template>

<script>
//记得从vue中导出引入
import {ref,reactive,computed} from 'vue'
export default {
	setup(){
		// 创建不需要改变的值
		 const text = '这是不需要响应改变的固定值';
		 
		// ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
		 const count = ref(0);
		 
	 	//定义响应式对象数据，赋值
		 const ofData = reactive({
      		name: '弟弟',
            sex: 'boy',
      		address: '中国'
    	 });
         console.log(ofData);

         //声明函数，改变ofData数据
         const UpdataData = () =>{
             ofData.name = '弟弟行为' //reactive 直接对象.属性获取或改变值
         }

        //computed使用
         const age = computed(()=> count.value * 2)

         //递减
         function decrease(){
             count.value--;//ref 改变或获取值，必须使用.value
         }

         //递增
        function add(){
             count.value++;
         }

        //导出数据供模板使用
         return{
             text,count,ofData,UpdataData,decrease,add,age
         }
	}
}
</script>

接下来我们看一下输出的效果：

然后我们分别打印看一下ref和reactive

Vue3使用了Proxy代理，区别于Vue2的Object.defineProperty,使用ES2015的Proxy代替

模板中直接count渲染，修改则需要count.value

结论：
ref和reactive都是用来做数据绑定的
ref响应式是普通数据绑定
reactive响应式对象数据，则是用来处理对象或者数组的（之前vue2用的是$set)

2.computed

代码如下（示例）：

<template>
    <div>
        {{count}}
        {{computedCount['count10']}}
        {{computedCount['count100']}}
       <button @click="add">点击修改count</button>
    </div>
</template>

//从vue中引入computed
import {ref,computed} from 'vue'
export default {
	setup(){
		//定义响应式数据
		const count = ref(0);
		
		//计算属性同函数用法差不多
		const changeCount = computed(()=> count.value * 2)
		
        //count递增
        const add = () =>{
             count.value++;
         }
		
		//计算多个数据，使用对象方式
		const computedCount = computed(()=>{
            return{
                'count10':count.value * 10,
                'count100':count.value * 100
            }
        })
        
		//导出数据供模板使用
		return{count,changeCount,computedCount,add}
	}
}

接下来我们看一下输出的效果：

结论：
同生命周期一样需要从vue中 按需引入
可以返回一个值，也可以返回一个 对象包含 多个值

3.watch

//监听一个ref
watch(count,(count,prevcount)=>{
      console.log(count,prevcount)
})

//监听reactive中属性
watch(()=>ofData.name,(name,prevName)=>{
      console.log(name,prevName)
})

//使用数组监听多个值
watch([count,age],([count,age],[prevCount,prevAge])=>{
    console.log(count,prevCount,age,prevAge)
})

4.watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。(setup后，onMounted之前)

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

---

总结

以上就是今天要讲的内容，后续出一篇关于组件之间的用法嗷……

附上Vue3文档：https://composition-api.vuejs.org/zh/api.html