跳至主要內容
Object.defineProperty与Proxy

Object.defineProperty

Object.defineProperty 是 ES5 引入的方法，用于在对象上定义新属性或修改现有属性。

let obj = {};
Object.defineProperty(obj, 'prop', {
  value: 42,
  writable: false
});
Cap原创大约 3 分钟vue
Object.defineProperty可能表现更好的场景

简单对象的监听

当我们只需要监听一个简单对象的少量属性时，Object.defineProperty 可能会有更好的性能。这是因为它不需要创建额外的代理对象。

let obj = {};
Object.defineProperty(obj, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log('Setting name');
        this._name = value;
    }
});
Cap原创大约 3 分钟vue
vue底层架构笔记

了解Vue的底层架构，是为非web领域提供Vue能力的大前提。Vue核心分为三大块：core，compiler，platform

原文地址：https://juejin.im/post/5cef749451882530810e0626#heading-8

core

core的作用是依据模板生成对应的虚拟节点——vnode，而后通过diff算法更新视图。所以可以根据生成的vnode，变成你想要的任何东西，不仅仅是在web平台的dom节点。

Cap原创大约 4 分钟vue
vue3 tips

ref/toRef/toRefs

因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性
如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成。

Cap原创小于 1 分钟vue
关于props

在编码过程中遇到这样的问题：父组件动态传给子组件一个对象，在子组件里，将这个props赋值给data
代码如下：

// 子组件代码
props: ['loanData'],
data () {
  return {
    info: this.loanData,
  }
},
// 父组件代码
<LoanInfo :loanData=loanData></LoanInfo>
// 其中这个loanData初始值为空，通过接口调用来赋值数据
Cap原创大约 3 分钟vue