computed vue 不 触发_vue与canvas绘制简易时钟

利用Vue特性与Cavnas的API绘制简易时钟

模块作用域、computed的灵活运用，以及CSS的border边框处理。

实例代码

从template，到css，再到详细的js逻辑代码。

html

里面放置一个canvas，我们假设宽高都是200px，则：

css

这里主要是利用了css天然的dashed虚线边框来模拟时钟的刻度。

至此效果如下：

js

data

这里使用一个date的data来控制变化，从而自动触发与之相关的computed字段，并在computed里面触发绘制函数。

---

computed

这里需要注意，最好像上面那样提供一个result变量，传给函数用，否则就可能在函数里面再次调用this.time，那这样就死循环了。

---

methods

上面注意两点：

1. 如果有些变量或DOM，只会获取一次，并且与$vue实例无关，那么可以考虑放在模块变量中，不用什么都绑定在data上，算是一种分工优化。
2. canvas的save与restore在这里使用是非常重要的东西。

其他就是常规的代码计算与逻辑。

无外乎，mounted时候主动触发一个this.date的值，并且后面每秒获取一次，这样就可以触发this.date这个computed，于是有触发绘制函数drawCanvas，一条线下来，相当于纯自动，感觉还是很棒的。

最终效果