https://www.zhihu.com/search?type=content&q=withDirectives 3大纲

基础

Proxy/Reflect基础

  1. //生成节点
  2. const dom = new Proxy({}, {
  3.   get(target, property) {
  4.     return function(attrs = {}, ...children) {
  5.       const el = document.createElement(property);
  6.       for (let prop of Object.keys(attrs)) {
  7.         el.setAttribute(prop, attrs[prop]);
  8.       }
  9.       for (let child of children) {
  10.         if (typeof child === 'string') {
  11.           child = document.createTextNode(child);
  12.         }
  13.         el.appendChild(child);
  14.       }
  15.       return el;
  16.     }
  17.   }
  18. });
  19. const el = dom.div({},
  20.   'Hello, my name is ',
  21.   dom.a({href: '//example.com'}, 'Mark'),
  22.   '. I like:',
  23.   dom.ul({},
  24.     dom.li({}, 'The web'),
  25.     dom.li({}, 'Food'),
  26.     dom.li({}, '…actually that\'s it')
  27.   )
  28. );
  1. //实现简单的链式调用
  2. var pipe = function (value) {
  3.   var funcStack = [];
  4.   var oproxy = new Proxy({} , {
  5.     get : function (pipeObject, fnName) {
  6.       if (fnName === 'get') {
  7.         //如果想用方法型trigger，return ()=>fn() 即可
  8.         return funcStack.reduce(function (val, fn) {
  9.           return fn(val);
  10.         },value);
  11.       }
  12.       funcStack.push(window[fnName]);
  13.       return oproxy;
  14.     }
  15.   });
  17.   return oproxy;
  18. }
  20. var double = n => n * 2;
  21. var pow    = n => n * n;
  22. var reverseInt = n => n.toString().split("").reverse().join("") | 0;
  24. pipe(3).double.pow.reverseInt.get; // 63

关于receiver，d对象本身没有a属性，所以读取d.a的时候，会去d的原型proxy对象找。这时，receiver就指向d，代表原始的读操作所在的那个对象。

  1. const proxy = new Proxy({}, {
  2.   get: function(target, key, receiver) {
  3.     return receiver;
  4.   }
  5. });
  7. const d = Object.create(proxy);
  8. d.a === d // true

关于拦截apply，作为非构造方法调用时

  1. var twice = {
  2.   apply (target, ctx, args) {
  3.     return Reflect.apply(...arguments) * 2;
  4.   }
  5. };
  6. function sum (left, right) {
  7.   return left + right;
  8. };
  9. var proxy = new Proxy(sum, twice);
  10. proxy(1, 2) // 6
  11. proxy.call(null, 5, 6) // 22
  12. proxy.apply(null, [7, 8]) // 30

概念

setup(props, context)

代替了create两个钩子，return的值作为template内可用的data值，并且自动解构浅层ref。

  1. //根据element-plus，一般用多个useXX方法，传入对应类型的prop等，生成一类方法/ref/computed
  2. setup(props, { emit }) { 
  3.   const {
  4.       tooltip,
  5.       showTooltip,
  6.       tooltipVisible,
  7.       wrapperStyle,
  8.       formatValue,
  9.       handleMouseEnter,
  10.       handleMouseLeave,
  11.       onButtonDown,
  12.       onLeftKeyDown,
  13.       onRightKeyDown,
  14.       setPosition,
  15.     } = useSliderButton(props, initData, emit)
  16. }
  17. export const useSliderButton = (props: ISliderButtonProps, initData: ISliderButtonInitData, emit) => {
  18.   const {
  19.     tooltip,
  20.     tooltipVisible,
  21.     formatValue,
  22.     displayTooltip,
  23.     hideTooltip,
  24.   } = useTooltip(props, formatTooltip, showTooltip)
  25. }
  26. <div>
  27.     <span>{{ count }}</span>
  28.     <!--  直接使用count不需要.value了 -->
  29.     <button @click="count++">Increment count</button>
  30.     <button @click="nested.count.value ++">Nested Increment count</button>
  31. </div>
  33.   import { ref } from 'vue'
  34.   export default {
  35.     setup() {
  36.       const count = ref(0)
  37.       return {
  38.         count,
  39.         nested: {
  40.           count
  41.         }
  42.       }
  43.     }
  44.   }

官方：
https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html#%E5%A3%B0%E6%98%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E7%8A%B6%E6%80%81
Vue3 Composition API: 对比ref和reactive：
https://zhuanlan.zhihu.com/p/267967246

ref

ref用于创建基础数据类型的响应式变量（采用复制的方式，修改响应式数据不会影响原始数据，数据发生改变，界面就会自动更新），可以理解成 reactive({value: 0 })
特点

  • ts指定复杂类型，需要声明泛型const foo = ref<string | number>('foo')
  • 修改值必须要用ref.value

可以用来为源响应式对象上的某个 property 新创建一个ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

toRefs/toRef

可以用来为源响应式对象上的某个 property 新创建一个ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
——use 接收两个参数target和attr，target是对象，attr是对象的属性，返回响应式变量（采用引用的方式，修改响应式数据，会影响原始数据，并且数据发生改变，界面也不会更新）

注： 为了解决reactive析构丢失响应性，Vue3提供了API：toRefs，它可以将一个响应型对象(reactive object) 转化为普通对象(plain object)，同时又把该对象中的每一个属性转化成对应的响应式属性(ref)。说白了就是放弃该对象(Object)本身的响应式特性(reactivity)，转而给对象里的属性赋予响应式特性(reactivity)

  1. //因为props是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。不能在props里直接解构
  2. //而toRefs相当于对每一个解构出来的值toRef,
  3. setup(props) {
  4.   const { title } = toRefs(props) 
  6.   console.log(title.value)
  7. }
  1. const state = reactive({
  2.   foo: 1,
  3.   bar: 2
  4. })
  6. const fooRef = toRef(state, 'foo')
  8. fooRef.value++
  9. console.log(state.foo) // 2
  11. state.foo++
  12. console.log(fooRef.value) // 3

函数式provide和inject

  1. <template>
  2.   <MyMarker />
  3. </template>
  5. <script>
  6. import { provide, reactive, readonly, ref } from 'vue'
  7. import MyMarker from './MyMarker.vue
  9. export default {
  10.   components: {
  11.     MyMarker
  12.   },
  13.   setup() {
  14.     const location = ref('North Pole')
  15.     const geolocation = reactive({
  16.       longitude: 90,
  17.       latitude: 135
  18.     })
  20.     const updateLocation = () => {
  21.       location.value = 'South Pole'
  22.     }
  23.     //防止修改
  24.     provide('location', readonly(location))
  25.     provide('geolocation', readonly(geolocation))
  26.     //保持单一职责，被注入这inject该方法才能修改provide的数据
  27.     provide('updateLocation', updateLocation)
  28.   }
  29. }
  30. </script>

watchEffect

watch() 和 watchEffect() 副作用是在 DOM 被挂载或更新之前运行的，所以当侦听器运行副作用时，模板引用还没有被更新。
因此，使用模板引用的侦听器应该用 flush: ‘post’ 选项来定义，这将在 DOM 更新后运行副作用，确保模板引用与 DOM 保持同步，并引用正确的元素。这将在 DOM 被更新后运行副作用，并确保模板引用与 DOM 保持同步并引用正确的元素。
注

  • update也是一个被侦听的副作用，但是默认的watchEffect会在update之前执行。
    1. //观测
    2. <template>
    3. <div ref="root">This is a root element</div>
    4. </template>
    5. <script>
    6. import { ref, watchEffect } from 'vue'
    7. export default {
    8.   setup() {
    9.     const root = ref(null)
    10.     watchEffect(() => {
    11.       console.log(root.value) // => <div></div>
    12.     }, 
    13.     {
    14.       flush: 'post'
    15.     })
    16.     return {
    17.       root
    18.     }
    19.   }
    20. }
    21. </script>
    watch
    侦听一个响应式对象或数组将始终返回该对象的当前值和上一个状态值的引用。为了完全侦听深度嵌套的对象和数组，可能需要对值进行深拷贝。这可以通过诸如 lodash.cloneDeep 这样的实用工具来实现。

Teleport

比如说一个有遮罩功能的按钮，如果遮罩存在于modal-button内，此时因为父子关系，遮罩会自然的和父组件保持一个relative的关系。此时用逻辑组件 teleport to=”body” 即可将遮罩挂载到body（或其它节点

  1. <body>
  2.   <div style="position: relative;">
  3.     <h3>Tooltips with Vue 3 Teleport</h3>
  4.     <div>
  5.       <modal-button></modal-button>
  6.     </div>
  7.   </div>
  8. </body>
  9. const app = Vue.createApp({});
  10. app.component('modal-button', {
  11.   template: `
  12.     <button @click="modalOpen = true">
  13.         Open full screen modal!
  14.     </button>
  15.     <div v-if="modalOpen" class="modal">
  16.       <div>
  17.         I'm a modal! 
  18.         <button @click="modalOpen = false">
  19.           Close
  20.         </button>
  21.       </div>
  22.     </div>
  23.   `,
  24.   //替代
  25.   <teleport to="body">
  26.       <div v-if="modalOpen" class="modal">
  27.         <div>
  28.           I'm a teleported modal! 
  29.           (My parent is "body")
  30.           <button @click="modalOpen = false">
  31.             Close
  32.           </button>
  33.         </div>
  34.       </div>
  35.   </teleport>
  36.   data() {
  37.     return { 
  38.       modalOpen: false
  39.     }
  40.   }
  41. })