2019-11-13 10:42:25来自分类 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 = []...
2019-11-09 11:52:07来自分类 前端
目录
1. [React 相关](#react)
2. [Vue 相关](#vue)
- [Vue 组件库](#vue-components)
- [Vue 表单](#vue-form)
- [Vue 操作](#vue-handle)
- [Vue 图片](#vue-image)
- [Vue 通知](#vue-notice)
- [Vue 其他](#vue-other)
3. [小程序相关](#weapp)
4. [前端 UI 框架](#ui)
5. [CSS 相关](#css)
6. [单页](#spa)
7. [表单相关](#form)
8. [弹出相关](#dialog)
9. [开发工具](#devtools)
10. [移动端相关](#mobile)
11. [鼠标相关](#mouse)
12. [数据处理](#data)
13. [图片相关](#image)
14. [动画相关](#animation)
15. [项目资料](#information)
16. [其他相关](#other)
# react
React 相关
===实例===
https://...
2019-10-29 11:06:38来自分类 其他
```
注意: 这个 SSR 不是 Vue 的服务端渲染
```
### 1. 安装 SSR
https://github.com/qinyuhang/ShadowsocksX-NG-R/releases
### 2. 在 SSR 里导入自己的节点
### 3. 配置文件
打开`$HOME/Library/Application Support/ShadowsocksX-NG/`, 可以看到`ss-local-config.json`文件, 这个是当前`SSR`使用的配置文件, 复制一份, 重命名为`ss-local-config-hk.json`或者其他名字
编辑`ss-local-config-hk.json`的节点信息, 如果不知道怎么编辑, 简单的方法, 就是在`SSR`里切换到你想要的节点, 然后把`ss-local-config.json`里的内容复制过来, 要注意的是, `local_port`(本地SOCKS5监听的端口)必须唯一, 如改成`2080`, 不能和其他的配置文件一样
### 4. 执行
在`$HOME/Library/Application...
2019-07-08 15:44:55来自分类 Vue
随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属`rem + vw`
Vant 文档中虽然有 REM 适配的方法, 试用 postcss-pxtorem 和 lib-flexible, 但是由于 Vant 设计稿应该是用 375 分辨率的, 如果我们的设计稿是 640 或者 750的, 换算起来则有些麻烦
```
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
```
这里如果直接修改了`rootValue`来适配我们自己的设计稿, 可能会导致 Vant 的 rem 数值偏小
先看`rem + vw`的 less 配置:
```less
// 设计稿宽度
@vm_design: 750;
// 为什么设置 100? 设置成便于计算, 计算r...
2018-11-15 11:39:55来自分类 前端
### 1. 用 Canvas 生成图片
```javascript
const getQrCode = () => {
const drp = 2
const width = 290.5 * drp
const height = (width * 462) / 290.5
const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, width, height)
return c.toDataURL('image/jpeg')
}
```
### 2. 将 dataURL 转成 Blob
```javascript
const dataURItoBlob = dataURI => {
var byteString
if (dataURI.split(',')[0].indexOf('base64') >= 0) byteStrin...
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-09-14 00:01:26来自分类 前端
`Optional Chaining`是个好东西, 可惜现在还处于`Stage 1`阶段, 虽然 babel 已经实现了该功能, 但是编辑器, eslint 之类还是不支持, 想用还是遥遥无期
`Optional Chaining`的作用, 主要是让开发者告别一堆的`&&`:
```javascript
const obj = {
abc: {
def: {
ghi: '123'
}
}
}
```
上面的对象, 如果想取最后的`123`, 在不确定前面 abc, def 是否为 null, undefined 的情况下, 我们就得这么写:
```javascript
const str = obj && obj.abc && obj.abc.def && obj.abc.def.ghi
```
天长地久的一串, 但是有`Optional Chaining`之后, 你只需要这么写:
```javascript
const str = obj?.abc?.def?.ghi
```
是不是简单了很多...
既...
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-05-31 15:08:02来自分类 Webpack
###Q1: display: inline-block 布局时, 间距消失了
A1: 在 vue-loader 15版本之前, 是不会删除元素之间空格的(至少会保留1个空格), 但是在 vue-loader 15之后, 如果你不小心这么设置了:
```javascript
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
```
那么元素之间的空格就不保留了, 如果你需要保留一个空格, 请将`preserveWhitespace`设置成`true`, 或者干脆删除
###Q2: ccs 压缩后, z-index 被重写
A2: webpack4 已经不支持用`extract-text-webpack-plugin`来优化 css, 需要改成`optimize-css-assets-webpack-plugin`和`mini-css-extr...
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 中, 毫无疑问...
