vueの公式ウェブサイトが3.xをリリースする前に、エディターのフロントエンドタイムはreactの基本を学びました。vue3.xを学習したとき、多くの新機能が、vue3.xを習得しやすいreactのフック機能に基づいていることがわかりました。ですから、Reactを見てみる時間をとることをお勧めします。vue3.xを習得しやすくなります〜
自宅に近い：vue3.xの新機能
- 下部にあるTypescriptを使用する
- レスポンシブ最下層がObject.definePropertyからProxyに変更されました
- フック---反応を参照
ここに焦点があります：vue2.xとvue3.0の文法的な違いの分析
テンプレート、スタイル-チャンスに違いはありません
スクリプトのvue2.xとvue3.xの比較
##データ
vue2.x
data() { return {} }レスポンシブ
- データで定義
- Vue.setを使用して応答性を実現する
vue3.x
import { reactive } from 'vue'
setup (props) {
const state = reactive({
title: 'Hello Vue3.0'
})
return state
}レスポンシブ
- vueパッケージからtoRefs関数をインポートし、状態をエクスポートするときにパッケージ化します。コードは以下のように表示されます
setup (props) {
const state = reactive({
title: 'Hello Vue3.0'
})
return { ...toRefs(state), xxx }
}##メソッド
vue2.x
メソッド：{メソッド}
vue3.x
- セットアップ関数で記述され、メソッド名を返すために戻ります
- 返された状態データをtoRefsを介してレスポンシブデータに変換することを忘れないでください。そうしないと、機能しません。コードは以下のように表示されます
return {
...toRefs(state),
play
}##計算
vue2.x
計算済み：{計算済み属性}
vue3.x
- セットアップ機能で記述されています。コードは以下のように表示されます
const getDoubleNum = computed(() => state.num * 2)- 状態で書かれた
const state = reactive({
myName: computed(() => 'my name is HuangWei --- vue3.x')
})注：計算された関数は、vueパッケージからインポートする必要があります。セットアップ関数に記述されている場合、計算された属性関数は、最終的に返されるときに返されます。
##ライフサイクル機能
vue2.x
作成、マウント、beforeDestory、Destoryed ...和データ同级
vue3.x
セットアップ関数、onCreated、onMounted、onBeforeUnmount、onUnmount ..で記述されています。
比較
beforeCreate- >使用setup（）
作成済み->使用設定（）
beforeMount-> onBeforeMount
マウント済み-> onMounted
beforeUpdate-> onBeforeUpdate
更新-> onUpdated
beforeDestory-> onBeforeDestory
破壊された-> onDestoryed
##コンポーネントの合格値
vue2.x
父から息子へ：小道具
息子から父親への受け渡し：this。$ emit
兄弟コンポーネントは値を渡します：パブリックバス、ミドルウェアとしての親コンポーネント
vue3.x
父から息子への受け渡し（祖父から孫への受け渡し、価値は複数のレベル間で受け継がれる可能性があります）
親コンポーネント：provide --- Provide（ 'name'、value）
サブコンポーネント：inject ---- inject（ 'name'）
コードは次のように表示されます。
親コンポーネント：
<template>
<div>
<Son />
</div>
</template>
<script>
// 引入子组件
import Son from '@/components/Son'
// 引入vue函数
import {reactive,provide} from 'vue'
export default{
components:{Son},
setup(){
const state = reactive({
title: '你好'
})
provide('title',title)
return {state}
}
}
</sctipt>サブアセンブリ：
<template>
<div>
{
{title}}
</div>
</template>
<script>
// 引入vue函数
import {reactive,inject} from 'vue'
export default{
setup(){
const state = reactive({
title: inject('title')
})
return {state}
}
}
</sctipt>注：セットアップ機能に書き込む必要があります
##ルーティング
vue2.x
vue、vue-router、Vue.use（VueRouter）の順にインポートし、新しいVueRouter（）を介してルーティングオブジェクトを作成し、ルートを使用してルーティングルールを設定し、最後にエクスポートします
vue3.x
- vueパッケージから、オンデマンドでcreateRouter関数をインポートし、createRouterを介してルーティングオブジェクトを作成し、ルートを使用してルーティングルールを設定し、最後にエクスポートします。
- プログラムによるナビゲーションとルーティングパラメータの取得
- プログラマティックナビゲーション：vue-routerパッケージからuseRouter関数をインポートし、useRouter関数を使用してセットアップ関数にルーターオブジェクトを作成します。その後、対応するpushメソッドやその他のメソッドを呼び出してプログラマティックナビゲーションを実装できます。
- ルートパラメータの取得：vue-routerパッケージからuseRoute関数をインポートし、useRoute関数を使用してセットアップ関数でルートオブジェクトを作成すると、route.params.xxx、route.query.xxxからルートパラメータを取得できます。
コードは次のように表示されます。
プログラムによるナビゲーション：
<template>
<div>
<p @Click="goToList('in_theaters')">跳转</p>
<p>{
{title}}</p>
</div>
</template>
<script>
// 引入vue函数
import {reactive} from 'vue'
// 引入路由
import {useRouter} from "vue-router";
export default{
setup(){
const state = reactive({
title: '你好vue3.x'
})
// 创建路由对象
const router = useRouter();
// 跳转到列表页面
const goToList = (type) => {
// console.log(type)
// vue2.x this.$router.push(`/list/${type}`)
router.push(`/list/${type}`);
};
return {state,goToList }
}
}
</sctipt>受信パラメータ
<template>
<div>
{
{title}}
</div>
</template>
<script>
// 引入vue函数
import {reactive} from 'vue'
// 引入路由
import {useRoute} from "vue-router";
export default{
setup(){
const state = reactive({
title: '你好vue3.x'
})
// 创建路由对象
const route = useRoute();
// 接收参数
console.log(route.params.type)
return {state}
}
}
</sctipt>## vuex
vue2.x
vue、vuex、次にVue.use（Vuex）をインポートし、5つのプロパティ（state、getter、mutation、action、module）を持つ新しいVuex.Store（）を介してストアオブジェクトを作成し、最後にストアをエクスポートします。
vue3.x
- vuexパッケージから、オンデマンドでcreateStore関数をインポートし、5つのプロパティ（state、getter、mutation、action、module）を持つcreateStore（）を使用してストアオブジェクトを作成し、最後にストアをエクスポートします。
##その他
注意：
- セットアップ関数はVue3.0の非常に重要な関数です。実行タイミングはbeforeCreateの後、作成前です。この関数には多くのコードを記述する必要があります。コンポーネントのテンプレートで使用する場合は、セットアップリターンアウト
セットアップの2つのパラメーターの説明：
- 小道具：親コンポーネントから渡された値を受け取るために使用されます。注：親コンポーネントから渡された値をprops.xxxから取得するには、セットアップ外の小道具で定義する必要があります。
- コンテキスト：コンテキストオブジェクト。このコンテキストオブジェクトにはいくつかの便利なプロパティが含まれています。これらのプロパティには、vue 2.x、vue 3.xでこれを介してアクセスする必要があります。これらのアクセス方法は、次のとおりです。
- プロジェクト内のvue2.xと3.xの構文は共存できます
- vue3.xの後、以前はエクスポートのデフォルトで直接書き込まれたコンテンツのほとんどは、セットアップ関数で書き込まれる必要があり、モデル値、イベント処理、および計算属性関数が返される必要があります。
- 反応性、toRefs、計算、onMountedなどの多くの使用済みコンテンツは、vueパッケージからインポートする必要があります
================================================== ==============
11.24
vue3.0がvue2.0よりも速い理由
- 差分法の最適化
vue2.0の仮想domが完全に比較されます
Vue3.0は静的フラグ（PatchFlag）を追加します
最後の仮想ノードと比較する場合は、パッチフラグのあるノードのみを比較してください
また、フラグ情報を通じて比較する現在のノードの内容を知ることができます
hoistState静的プロモーション
Vue2.0は、要素が更新に参加しているかどうかに関係なく、毎回再作成されてレンダリングされます
Vue3.0では、更新に参加しない要素は静的にプロモートされ、一度だけ作成され、レンダリング中に直接再利用できます。
cacheHandlersイベントリスナーキャッシュ
デフォルトでは、onClickは動的バインディングと見なされるため、変更に追いつくたびに
ただし、同じ機能であるため、追跡の変更はなく、キャッシュして再利用するだけです。
ssrレンダリング
<template>
<div>
<p>{
{count}}<p>
<button @click="myFn"></button>
</div>
</template>
<script>
import {ref} from 'vue'
export default{
name: 'App',
// setup函数是组合API的入口函数
setup(){
// let count = 0
// 定义了一个名称叫做count变量，这个变量初始化值是0
// 这个变量发生改变之后，Vue会自动更新UI
let count = ref(0)
// 在组合API中，如果想要定义方法，不用定义到methods中，直接定义即可
function myFn(){
// alert(123)
count.value += 1;
console.log(count.value)
}
// 注意点
// 在组合api中定义的变量/方法，要想在外界使用，必须通过return{xxx}暴露出去
return {count,myFn}
}
}
</script><template>
<div>
<ul>
<li v-for="(stu,index) in state.stu"
:key="stu.id"
@click="remStu(index)"
>{
{stu.name}}-{
{stu.age}}</li>
</ul>
</div>
</template>
<script>
import {ref, reactive} from 'vue'
export default{
name: 'App',
setup(){
// ref函数注意点：
// ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）
/** let state = reactive({
stus: [
{id: 1,name:'zs',age:12},
{id: 2,name:'ls',age:12},
{id: 3,name:'wu',age:12},
]
})
remStu(index){
state.stus = state.stus.filter((stu,idx) => idx !== index)
}
return {state,remStu}**/
// 删除
let {state, remStu} = useRemoveStudent();
// 新增
let state2 = ({
})
return {state,remStu}
}
function useRemoveStudent(){
let state = reactive({
stus: [
{id: 1,name:'zs',age:12},
{id: 2,name:'ls',age:12},
{id: 3,name:'wu',age:12},
]
})
remStu(index){
state.stus = state.stus.filter((stu,idx) => idx !== index)
}
return {state,remStu}
}
}
</scritp>