vue3.0新特性及用法

1.性能上提升1.3-2倍

2.按需加载 和 compsition api（组合api）

createApp

在 Vue 3 中，改变全局 Vue 行为的 API 现在被移动到了由新的 createApp 方法所创建的应用实例上。
vue3.0中使用createApp 来创建vue实例

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');

main.js 下加载router、vuex

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

setup函数

1、简介
setup函数是vue3中专门为组件提供的新属性。
2、执行时机
创建组件实例，然后初始化props，紧接着就调用setup函数，会在beforeCreate钩子之前被调用。
3、模板中使用
如果setup返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文。

4、如何使用

<template>
  <div>
  {{name}}
  </div>
</template>
<script>
import { reactive } from "vue"
export default {
  setup(props){
  const state = reactive({
  name:'abc'
  })
  return state
  }
}
</script>

注意：在setup()函数中无法访问到this

reactive函数

1、简介
reactive()函数接收一个普通对象，返回一个响应式的数据对象
2、基本语法

按需导入reactive函数

import { reactive} from "vue"

创建响应式数据对象

const state = reactive({ id:1 })

3、定义响应式数据供template使用

1)按需导入reactive函数
import { reactive} from "vue"
2)在setup()函数中调用reactive()函数，创建响应式数据对象
setup(){
  //创建响应式数据对象
  const state = reactive({
  name:'abc'
  })
  //setup函数中将响应式数据对象return出去供template使用
  return state
}
3)在template中访问响应式数据
<template>
  <div>
  {{name}}
  </div>
</template>

ref的使用

1、简介
ref()函数用来根据给定的值创建一个响应式的数据对象，ref()函数调用的返回值是一个对象，这个对象
上只包含一个value属性
2、基本语法

1)按需导入ref函数
import { ref } from "vue"
2)在setup()函数中调用ref()函数，创建响应式数据对象
setup(){
  var c = ref(10);   //初始化值为10
  return {c}
}
3)在template中访问响应式数据
<template>
  <div>
  {{c}}
  </div>
</template>

toRefs的使用

1、简介
toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性
节点，都是ref()类型的响应式数据
2、基本语法

1)按需导入toRefs函数
import { reactive ,toRefs } from "vue";
2)...toRefs(state)创建响应式数据对象
setup(){
    let state = reactive({id:10});
  return { 
  ...toRefs(state)
  };
}
3)在template中访问响应式数据
<template>
 <div>
  <p>{{id}}</p>
 </div>
</template>

computed计算属性的使用

1、简介
computed()用来创建计算属性，computed()函数的返回值是一个 ref 的实例
2、基本语法

1)按需导入computed()
import { reactive ,toRefs ,computed} from "vue";
2)在setup()函数中调用computed()函数
setup(){
    let state = reactive({
  id:10,
  n1:computed(()=>state.id+1)  //计算属性的方式
    });
}
3)在template中访问响应式数据
<template>
 <div>
  <p>{{n1}}</p>
 </div>
</template>

watch的使用

1、简介
watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作
2、基本语法

1)按需导入watch()
import { reactive ,toRefs ,watch} from "vue";
2)在setup()函数中调用watch()函数
setup() {
 let state = reactive({
  id:10,
  });
  watch(() => console.log(state.id))
 },

生命周期钩子函数

1、基本语法

1)新版的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用
import { onMounted, onUpdated, onUnmounted} from "vue";
2)在setup()函数中调用computed()函数
setup(){
  onMounted(() => {
  console.log('mounted!')
  })
  onUpdated(() => {
  console.log('updated!')
  })
  onUnmounted(() => {
  console.log('unmounted!')
  })
}

2、新旧对比

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

provide和inject

1、简介
provide()和 inject()可以实现嵌套组件之间的数据传递。这两个函数只能在 setup()函数中使用。父级组
件中使用 provide()函数向下传递数据；子级组件中使用 inject()获取上层传递过来的数据。
2、基本语法

父组件：
在setup()函数中调用provide()函数
setup() {
  provide('globalColor', 'red')
  },
子组件：
在setup()函数中调用inject()函数
  setup(props){
  const state = reactive({
  color : inject("globalColor")
  })
  return state
  }

Vue Router 4

现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变
化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。
1、创建方式
利用createRouter 用来创建router对象

import { createRouter } from 'vue-router'
const router = createRouter({
  routes
})

2、路由模式
createWebHashHistory路由模式路径带#号
createWebHistory路由模式路径不带#号()

import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

Vuex4

1、创建方式

创建 store 容器实例
import { createStore } from 'vuex'
const state = {
  flag:true 
};
var getters = { 
  getFlag(state){
  //具体的处理
  }
}
const actions={ 
  CHANGEFLAG({commit}){ 
  commit('CHANGEFLAG');
  }
};
const mutations = { 
  CHANGEFLAG(state){ 
  //具体的处理
  }
};
const store = createStore({
  state,
  getters,
  actions,
  mutations
})
//导出store对象
export default store;

2、组件中的使用

import { useStore } from "vuex";  //导入vuex
export default {
  props:{
  name:String
  },
setup(props) { 
  let store = useStore(); //定义store
  const state = reactive({});
  return {
  ...toRefs(state), 
  store
  };
  },
}