初识vue3

一.vue3与vue2区别

1.响应式原理

1. vue2响应式原理采用Object.defineProperties监听对象的getter与setter
2. vue3 pxoy代理的方式监听对象

2.启动方式

vue2

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#app')

vue3

import { createApp } from 'vue'
createApp(App).use(store).use(router).mount('#app')

3.全局方法定义

vue2

Vue.prototype.$http=axios

vue3

var app = createApp(App)
app.config.globalProperies.$http = axios

4.template根组件

vue2

有且只有一个根组件

vue3

可以有多个

5.生命周期

vue2

创建前后 beforeCreate，created
挂载前后 beforeMount，mounted
更新前后 beforeUpdate，updated
销毁前后 beforeDestroy，destroyed

vue3

创建前后 beforeCreate，created
挂载前后 beforeMount，mounted
更新前后 beforeUpdate，updated
卸载切换 beforeUnmount，unmounted

二.setup组件

1. setup() 函数在组件创建 created() 之前执行。
2. setup() 函数接收两个参数 props 和 context。
3. 第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。
4. 第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script>
import {ref, onMounted} from 'vue';

export default {
    setup(){
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时，我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
//在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用
//import { ref } from 'vue'
//let count = ref(0);
</script>

ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问。

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

三.ref 创建响应式数据

//使用ref可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。
// 创建
const xxx = ref(value)

// 使用
xxx.value

// 在模板中
<div>{{xxx}}</div>

四.reactive 创建响应式数据

//定义一个对象类型的响应式数据，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作
//返回一个对象的响应式代理。
// 定义一个引用类型的响应式数据list 默认是
    const list = reactive(["vue","react","angular"])

五.computed 计算属性

var twiceNum = computed(()=>num.value*2)

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

六. watch 监听

watch(num,function(nval,oval){
      console.log("num由",oval,"变化为",nval)
    })
watch(source, callback, {
  flush: 'post',
  onTrack(e) {
    debugger
  }
})   

七.watchEffect 监听回调

watchEffect(()=>{
      // 只要在改回调函数中引用的变量,都会监听到变化
      console.log(num.value,list[1],'变化了');
    })