2018-09-28 17:04:49来自分类 Vue
#### 1. 不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 `/page/1` => `/page/2` 或者 `/page?id=1` => `/page?id=2` 这类链接跳转时, 将不在执行`created, mounted`之类的钩子, 这时候你需要在路由组件中, 添加`beforeRouteUpdate`钩子来执行相关方法拉去数据 相关钩子加载顺序为: beforeRouteUpdate #### 2. 设置 router-view 的 key 属性值为 $route.path 从`/page/1` => `/page/2`, 由于这两个路由的`$route.path`并不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate => created => mounted 从`/page?id=1` => `/page?id=2`, 由于这两个路由的`$route.path`一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为: beforeRouteUpdate #...
2018-08-28 15:31:40来自分类 Vue
有这么一个需求, 需要在用户离开时, 弹窗让用户选择[是]/[否]按钮来决定页面跳转, 如果选[是]则跳转到一个页面, 选否则留在当前页面 第一想法肯定是在`beforeRouteLeave`做相关逻辑 ```javascript beforeRouteLeave(to, from, next) { const answer = window.confirm('...') if (answer) { next('/some/path') } else { next(false) } } ``` 结果出现了死循环, 因为在调用`next('/some/path')`时, 又触发了`beforeRouteLeave`, 从而又执行了`next('/some/path')`, 所以出现了死循环 处理方法也很简单: ```javascript beforeRouteLeave(to, from, next) { if (to.fullPath === '/some/path') { return ...
2018-08-09 10:18:05来自分类 Vue
假设在根组件用 dispatch 触发一个异步的 Action ```javascript async created() { await this.$store.dispatch(`base/info/get`) }, ``` 在路由组件里 watch 数据 ```javascript computed: { ...mapGetters({ $$info: 'base/info/get' }) }, watch: { $$info(val) { console.log(val) } } ``` 刷新页面, 这时候会出现有时候能触发 watch, 有时候又不触发, 这到底是什么原因呢? 看 vue 的源代码: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62 ```javascript export function initState (vm: Component) { vm._watchers = []...
2018-05-23 18:06:12来自分类 Vue
本来想前面写点什么的, 还是算了, 直接说思路吧. 从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext 之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路 因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 api 使用, 否则就会出现 cookies 污染 Vue2.3 以后, 我们需要为每个请求创建一个新的根 Vue 实例, 同样的, router、store 也需要, 所以, 我们的思路也在此, 将封装后的 api 注入到这 3 个实例当中去, 保证每个请求的 api 都是独立, 那么就剩一个问题, 注入到哪个实例里面去!? api 请求用到最多的两个地方就是: 组件和 vuex 的 actions 里, 这两个地方都有 store 的影子, 所以, 注入到 store 中, 毫无疑问...
2018-01-15 16:19:04来自分类 Vue
一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法. 随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法: ### 第一种方案 第一种方案已经不再适用, 这里不再细说 ### 第二种方案 思路: 将 cookies 注入到 ssr 的 context里, 然后在请求 api 时读取, 再追加到 axios 的header 里 1, 首先在 server.js 里将 cookies 加到 context里 ```javascript const context = { title: 'M.M.F 小屋', description: 'M.M.F 小屋', url: req.url, ...
2018-01-03 16:34:01来自分类 Vue
### 1. v-model 在 jsx 中支持 v-model 指令 github: https://github.com/nickmessing/babel-plugin-jsx-v-model ```bash npm i babel-plugin-jsx-v-model -D # or yarn add babel-plugin-jsx-v-model --dev ``` .babelrc: ``` { "presets": ["es2015"], "plugins": ["jsx-v-model", "transform-vue-jsx"] } ``` ``` Vue.component('hello-world', { data: () => ({ text: 'Hello World!' }), render () { return ( <div> <input type="text" v-model={this.text} /> {this.text} </div> )...
2018-01-02 11:10:23来自分类 Vue
``` <template> <div class="el-textarea"> <textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off"></textarea> <button @click="insertAtCursor('<张三>')" type="button">插入会员名</button> </div> </template> <script> /* eslint-disable no-inline-comments */ export default { data() { return { content: '' } }, methods: { async insertAtCursor(myValue) { const myField = document.querySelector('#textarea') if (my...
2017-12-01 10:08:59来自分类 Vue
.sync 在 .vue 文件中写法很简单, ``` <comp :foo.sync="bar"></comp> ``` 但是在 jsx 语法中, 这类指令, 双向绑定, 修饰符写起来, 确是麻烦的很, 有的时候不得不用 jsx 语法时, .sync 修饰符该怎么写呢? 首先 .sync 只是个语法糖, 真实语法是: ``` <comp :foo="bar" @update:foo="val => bar = val"></comp> ``` 以 element 的 dialog 组件为例, 那么 jsx 的写法就可以这么写: ``` render(h) { // eslint-disable-line const listeners = { // 关键代码 - 1 'update:visible': val => { this.show.dialog = val } } const content = this.show.dialog ? ...
2017-11-19 00:18:38来自分类 Vue
看过很多 vue 项目的代码, 发现很多人喜欢把样式写在组件了, 其原因大部分是为了方便, 好维护, 也很多人喜欢滥用`scoped`属性, 官方的 [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0 "vue-hackernews-2.0") 的实例也是这么做的, 但是个人却不太喜欢这么做, 原因有以下几点: ### 1. 构建速度会变慢 写在组件的 style 里的样式会先经过`vue-loader`再走`less-loader`或者`css-loader`, 无形中增加了编译时间 ### 2. 在用了 scope 属性后, 生成的 js 文件和 css 文件都会正常臃肿一些 scope 属性, 其实就是在经过`vue-loader`编译的时候, 组件模版的对应元素和 css 样式添加一个随机的属性, 这样会造成在代码中添加大量类似`data-v-33053b70`这样的代码上去, 无形中使打包后的文件变大, 组件越多, 越明显 ### 3. scope 属性, 对当前组件不存在的元素不起作用 原因...
2017-09-08 14:57:33来自分类 Vue
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 ## 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver ```bash yarn add axios yarn add jszip yarn add file-saver ``` ## 2. 下载文件 ```javascript import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { axios({ method:'get', url, responseType: 'arraybuffer' }).then(data => { resolve(data.data) }).catch(error => { reject(error.toS...