Vue study

最近入职ibm，接手一个简单的poc项目。vue+node

一直都做得是纯java后台项目，借此机会学习一下。

学习网站当然是官网了，很好用。

https://cn.vuejs.org/v2/api/

还有就是一本书。《Vue.js实战》清华大学出版社的，在cnds上下载的pdf版本的。用ipad看起来刚刚好。

ide用的是vs code，装环境有node.js vue.js

完事后用npm install更新组件

执行npm install -g vue-cli

vue-cli用来构建vue项目。webpack init一下helloworld项目结构就构件好了。

关于前端做过一个thymeleaf项目，所涉及的只是不多，所以一些抽象概念还需要反复的去理解。

我把相应的理解记到这里。

①生命周期钩子：

https://blog.csdn.net/weixin_42782004/article/details/102518219

https://www.zhihu.com/question/50880439

其实相关的api网站上都有说明，这个自己看就好。

②指令与事件：

指令(Directives)是Vue最常用的功能。它带有前缀 v-，比如v-if，v-for，v-show

最重要的两个一个是v-bind和v-on可能实际工程很少看到，那是因为语法糖的原因。

v-bing的语法糖是：

v-on的语法糖是@

比如说<button @click="handleClose">  // <button v-on:click="handleClose"> 

<a :href="url"> // <a v-bind:href="url">

还有关于v-if和v-show的区别。

v-if时条件渲染，即只有v-if为真时才会进行编译，进行渲染。

而v-show只是简单的CSS属性切换，无论条件是否为真，都会被编译。

相比之下，v-if更适合条件不经常改变的场景，因为切换开销很大，而v-show适用于频繁切换条件。

以上说法笼统些，可以参考相面文章。

https://www.jianshu.com/p/7af8554d8f08

③实例与数据

var app = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
  data() {
    return {
       a: 1
    }      
  }    
})
// 变量app代表这个Vue的实例，实例中其中必不可少的就是el
实例有很多内置的属性和方法。用$开头，比如app.$el
vue对象本身也代理了data对象的所有属性。
比如说app.$data.a 可以直接写成app.a
有一点注意的是为了不和vue的自身属性冲突，_和$开头不会被代理。

④插值与表达式，过滤器

这里面有个重要概念，数据双向绑定

{{}}

这个跟java都是一样的绑定的是变量即引用。关于过滤器，我们可以将他理解成为一个函数。{{}}尾部用管道符 | 调用相应的过滤器。过滤器可以定义在methods里。

{{}}里也可以也可以加入简单的表达式。比如{{ number / 10}} {{ isOK ? 'OK' : ' NO' }} 或者类似与java stream的流式处理 {{test.split(',').reverse()/join(',')}}

过滤器可以串联 {{msg | filter1 | filter2}} 也可以接受参数，当然过滤器默认第一个参数是|前的数据本身。

 ⑤生命周期

Vue内置的api，我们只需重写其内容即可。

api里有详细介绍。比较容易混的是activated和created 需要注意。

⑥计算属性

其实就是computed函数，但是methods内定义的函数也能做到。

但是这里面涉及到一个缓存问题。

computed是基于缓存的。如果数据不发生变化，computed是不会被调用的。

而methods则不同，只要重新渲染，methods就会被调用，尽管值没有发生变化。

由此可见，当遍历大数组和大量计算时，应当使用computed属性，除非你不希望得到缓存。

这里面我做了一个验证，就是看看computed和methods生命周期是什么

 比如说我点击了摸个按钮，隐藏了一个标签属性。这个操作后，因为页面变化了需要重新渲染，methods方法会被调用，而computed则不会，因为缓存的存在，并且没有改变。

 

有几个单词需要记一下。hook钩子，render渲染，关于渲染，下面这个文章写的不知对还是不对。浏览器render是个进程，里面是个多线程处理。

https://www.cnblogs.com/xiaoxiaoMrHuang/p/10916216.html

今天先写到这。