Vue3 快速上手

// .vue文件代码片段
<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from "vue";
export default {
  name: "Life",
  props: {
    title: String,
  },
  /**
   * @description:
   * @param {object} props 不能使用ES6解构，否则会破坏响应式。可以使用 toRef() 进行解构
   * @param {object} context 非响应式，可使用ES6解构，包含attr、emit、slots
   * @return {*}
   */
  setup(props, context) {
    // 注意：在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
    onBeforeMount(() => {
      console.log(props);
      console.log(context);
      console.log("传入的title是" + props.title);
      console.log("挂载前执行");
    });

    onMounted(() => {
      console.log("挂载后执行");
    });

    onBeforeUpdate(() => {
      console.log("更新前执行");
    });

    onUpdated(() => {
      console.log("更新后执行");
    });

    onBeforeUnmount(() => {
      console.log("卸载前执行");
    });

    onUnmounted(() => {
      console.log("卸载后执行");
    });

    return {}
  }
}
</script>

<template>
  <div>
    <div ref="el">div元素</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    // 创建一个DOM引用，名称必须与元素的ref属性名相同
    const el = ref(null)

    // 在挂载后才能通过 el 获取到目标元素
    onMounted(() => {
      el.value.innerHTML = '内容被修改'
    })

    // 把创建的引用 return 出去
    return {el}
  }
}
</script>

<template>
  <div v-for="item for list" :key="item" :ref="setItemsRef"></div>
</template>
<script>
export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemsRef(el) {
      el && (this.itemRefs.push(el))
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  }
}
</script>

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
}
</script>

// Object 声明，Vue3中不适用
const app = new Vue({
  data: {
    a: 1
  }
})

// 而是全部改为 function 声明
const app = new Vue({
  data() {
        return {
            a: 1
        }
    }
})

<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>

<!-- vue 2.x -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

<!-- vue 3 支持-->
<template>
  <header>...</header>
  <main v-bind="$attr">...</main>
  <footer>...</footer>
</template>

Vue.mixin(...)
Vue.directive(...)

// 但这样如果有两个根实例话，则会互相污染
const app1 = new Vue({ el: '#app-1' })
const app2 = new Vue({ el: '#app-2' })

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

// 在 vue 2.x 中，往往我们这样使用来达到可以在每个组件访问某个 property
Vue.prototype.$xxx = xxx

// 在 vue 3.x 版本中修改为
const app = createApp({})
app.config.globalProperties.$xxx = xxx

// Vue 2 渲染函数示例
export default {
  render(h) {
    return h('div')
  }
}

// Vue 3 渲染函数示例
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

// in vue 2.x
new Vue({
  template: <div>这是一个模板</div>
}).$mount('#app')

// 模板代替了 挂载DOM
// 结果会渲染为
<div>这是一个模板</div>

// in vue 3.x
Vue.createApp({
  template: <div>这是一个模板</div>
}).$mount('#app')

// 可以理解为在挂载的 DOM 上使用了 innerHTML
// 结果会渲染为
<div id="app">
 <div>这是一个模板</div>
</div>

<a v-bind:[attributeName]="url"> ... </a>
// attributeName 会被动态求值，若值为null或一切非字符串数据最终都会报警告
// 建议使用计算属性, 避免使用大写字符来命名键名

import { reactive } from 'vue'
const obj = {
  a: 1,
  b: {
    c: 2,
        d: {
          e: 3,
        }
    }
}
const state = reactive(obj)
console.log(state)
console.log(state.b)
console.log(state.d)
// 结果如下

<template>
  <div>
    <div>可读写{{ state.a }}</div>
    <div>只读{{ readState.a }}</div>
    <!-- 当你点击 修改可读写读 按钮，两个div都会变化，当你点击 修改只读，控制台会报一个警告 Set operation on key "a" failed: target is readonly. -->
    <button @click="add">修改可读写读</button>
    <button @click="add2">修改只读</button>
  </div>
</template>

<script>
import { readonly, reactive } from "vue";
export default {
  setup() {
    const state = reactive({ a: 1 });

    const readState = readonly(state);

    function add() {
      state.a++;
    }

    function add2() {
      readState.a++;
    }

    return {
      state,
      readState,
      add,
      add2
    };
  },
};
</script>

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo)

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

<template>
  <div>
    <p>响应式a：{{ state2.a }}</p>
    <p>非响应式b：{{ state2.b.c }}</p>
    <p>
      首先点击修改非响应式，点击后视图并没有发生修改，只有点击修改响应式后视图才监听到修改
    </p>
    <button @click="add">修改响应式</button>
    <button @click="add2">修改非响应式</button>
  </div>
</template>

<script>
import { reactive, shallowReactive, toRaw } from "vue";
export default {
  setup() {
    const obj = {
      a: 1,
      b: {
        c: 2,
        d: {
          e: 3
        }
      }
    }

    const state2 = shallowReactive(obj); // shallowReactive 接受一个参数，使之成为响应式对象，但是不执行深度响应式转换，即嵌套的对象不做proxy。其实了解proxy就明白reactive 和 shallowReactive的区别
    console.log(state2);
    console.log(state2.b);
    console.log(state2.b.d);

    function add() {
      state2.a++;
    }

    function add2() {
      state2.b.c++;
      // 当触发这个的时候，值已经改变了，但 shallowReactive 只会把自身属性改为响应式，而嵌套属性是非响应式的。
      console.log(state2);
    }

    return {
      state2,
      add,
      add2,
    };
  },
};
</script>

<!--
 * @Author: kim
 * @Date: 2020-11-30 15:08:04
 * @LastEditors: kim
 * @LastEditTime: 2020-11-30 16:51:21
 * @Description:
-->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">点击</button>
  </div>
</template>

<script>
import {
  ref,
  reactive,
} from "vue";
export default {
  setup(props, context) {
    // ref 和 reactive 都是用来包装数据为一个响应式
    const count = ref(0); // 每次访问的时候需要加上 .value，但在模板中不需要。一般用于基本类型string、number、boolean。

    const add = () => {
      count.value++;
    }

    return { count, add };
  },
};
</script>

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

const obj = {
      a: 1,
      b: {
        c: 2,
        d: {
          e: 3,
        },
      },
    }

const state = reactive(obj)
const state2 = toRefs(state)
console.log(state2);

<template>
 <p>{{ state.a }}</p>
 <p>{{ state.first.b }}</p>
 <p>{{ state.first.second.c }}</p>
 <!-- 点击改变2，你会发生先数据变了，但视图没有改变，只有点击改变1，视图才发生变化 -->
 <button @click="change1">改变1</button>
 <button @click="change2">改变2</button>
</template>

<script>
import {shallowRef} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }

        const state = shallowRef(obj)
        console.log(state);

        function change1() {
          // 直接将state.value重新赋值
          state.value = {
            a: 7,
            first: {
              b: 8,
              second: {
                c: 9
              }
            }
          }
        }

        function change2() {
          state.value.first.b = 8
          state.value.first.second.c = 9
          console.log(state);
        }

        return {state, change1, change2}
    }
}
</script>

<!-- 在vue 2.x中 -->
<!-- 在父组件或祖先组件中注入 -->
<script>
export default {
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

<!-- 在子组件或子孙组件中使用 -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>

// 当监听 ref 类型时
setup() {
  const state = ref(0)
    watch(state, (newValue, oldValue) => {
    console.log(`原值为${oldValue}`)
        console.log(`新值为${newValue}`)
    })
}

// 监听 reactive 类型时
setup() {
  const state = reactive({cout: 0})
    watch(() => state.count, (newValue, oldValue) => {
    console.log(`原值为${oldValue}`)
        console.log(`新值为${newValue}`)
    })
}

// 监听多个值的时候
setup() {
  const state = reactive({cout: 0, a: 2})
    watch([() => state.count, () => state.a], ([newCount, newA], [oldCount, oldA]) => {
    console.log(oldCount)
        console.log(newCount)
        console.log(oldA)
        console.log(newA)
    })
}

<script>
import {reactive, watchEffect} from 'vue'
export default {
    setup() {
    const state = reactive({ count: 0 })

    watchEffect(() => {
            // 比如在这里它会自动监听state.count
      console.log(state.count)
    })

        setTimeout(() => {
            state.count ++
        }, 1000)
    }
}
</script>

const instance = getCurrentInstance()
console.log(instance)

// store 文件夹下的 index.js
import Vuex from 'vuex'

const store = Vuex.createStore({
    state: {
      name: '至安'
    },
    mutations: {
      ……
    },
    ……
})

// example.vue
<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
    setup() {
        // 获取 vuex 实例
        const store = useStore()

        console.log(store)
    }
}
</script>