嘿，老铁！今天咱们聊聊那件事——Vue系列一，有哪些疑问点？

你们知道吗，我Zui近在公司项目里一直用 Vue 2。别误会，那可不是因为我懒得升级，而是因为我们的后端接口和业务流程dou跟 Vue 2 写得差不多。于是我就把这段时间的心得写成了几篇小文，想让同道中人也Neng顺手kankan。

不过写完第一篇之后我发现自己对一些细节还是有点摸不着头脑。于是又写了第二篇，继续往下挖。今天的这篇，就是把那些疑问点统统罗列出来让大家一起砸砖头吧。

先说 Object.defineProperty 那个老办法，它把对象属性变成 getter/setter，然后每次访问dou触发依赖追踪。

但你会不会遇到：页面geng新不了？

那可Neng是因为你给对象添加了新属性，却忘了遍历一下。

我记得以前改过一次代码：$set，结果还没刷新。这时我才意识到，是因为缺少反应式监听。

其实Zui简单的方法就是：$set 或者用 {{ user.age }} 前先声明好。

Ru果 template 标签不放在 vue 实例绑定的元素内部默认里面的内容不Neng显示在页面上，但查kan后台 DOM 结构存在 template 标签。

举个例子：

这段代码里虽然有两个 div 在模板里但Zui终渲染到页面上的是其中一个，另外一个则被忽略掉。原因是 Vue 把 template 当作包装器，只保留第一个子节点。

而另一个情况：

这里kan到的是“模板”标签本身还保留，但其内部内容没有被挂载，因为它没有被包裹在 root 元素里。

一句话：template 是容器，只Neng包一个根节点；Ru果你想要多个根节点，就得把它们放进父级 div 或者使用 v-if 条件包装起来。

我之前总以为模板就是Zui方便的，后来又想起 render 函数也hen酷啊！

其实两者差异就像前端老 vs 新手：

- 模板geng直观，上手快；但复杂逻辑需要分离出去。

- render geng灵活，Ke以直接操作 VNode；但语法稍显啰嗦。

- 在大型项目里Ru果你需要动态生成组件树，render geng适合；否则模板就足够用了。

I 曾经遇到这样一种场景：用户从列表页跳转到详情页，再回到列表页时数据被清空。我的第一反应是：这肯定是路由懒加载导致的问题！然后我尝试了 keep-alive，但效果并不好。所以我决定把关键数据放进 Vuex，并配合 localStorage Zuo持久化缓存。

- 在 mutations 中添加 setData 方法；

- 在 actions 中判断是否Yi缓存，Ru果未缓存再请求接口；

- 当路由切换完成后从 localStorage 恢复状态。

"我们公司的 API dou跑在不同域名下这么麻烦啊！” 那么咋办呢？先检查服务器是否设置了 Access-Control-Allow-Origin，然后前端配置 proxy 或者使用 jsonP。Ru果你用 vue-cli，一键搞定代理：

'"""

// vue.config.js
module.exports = {
   devServer:{
      proxy:{
         '/api':{
            target:"//backend.example.com",
            changeOrigin:true,
            pathRewrite:{^/api/:''}
         }
      }
   }
}

'"""

Props 是单向传递，从父到子；子组件不Neng直接修改 props，否则会报警告。

Data 是双向绑定，在组件内部自由读写，不影响父级。

若需双向绑定，可使用 .sync 修饰符或 v-model。

记住一句话：不要直接改 props，否则会破坏单向数据流，也会导致控制台警告“Avoid mutating a prop directly”。