AwesoLynn

之前在上家公司自己建系统的时候出现过切换页签，但切换后上个页面的内容没有被缓存，而是重新渲染了。

正好学习Vue3时看到了解决方法。

（之前因为赶工作进度，学习Vue2时没有用心看<–要改正的问题

使用<keep-alive></keep-alive>将切换的组件包裹起来即可

1
2
3

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

Vue组件实例的作用域相互独立，不同组件之间的数据无法相互引用

props

参数props用于父组件向子组件传递数据

父组件调用子组件，在子组件的props写入需要的属性。传递时，在父组件内调用的子组件中直接使用。

可以传入静态的值：

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此推荐使用事件修饰符处理。尽管可以在方法中实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

修饰符是由点开头的指令后缀来表示的。使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

1. v-if在初始渲染时判断条件，若为假，则不进行渲染。只有当条件为真时才开始渲染条件块。确保在切换过程中条件块内的事件监听器和子组件被适当的销毁和重建。
2. v-show无论初始判断条件是真或假，均会进行渲染。即只是切换元素的CSS Property display。
3. v-show不支持<template>和v-else

使用v-if有更高的切换开销，若运行时条件很少改变，则选择v-if。v-show有更高的初始开销，若需要频繁的切换，则使用v-show更好。

假值Falsy：false,0,"",null,undefined,NaN

真值Truthy：除假值外均为真值。

不要在模版中放入太多的逻辑。模版最好是简单和声明性的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

data(){
    return {
        book:{
            author: 'xxx',
            borrower: [
                'aaa',
                'bbb',
                'ccc'
            ]
        }
    }
}

<template>
    <div>
        <p>This book has been borrowed?</p>
        <span>{{ book.borrower.length > 0 ? 'yes' : 'no' }}</span>
    </div>
</template>

data

组件的data是一个函数，调用它返回一个对象，被vue封装后，以$data的形式存储在组件实例中

1
2
3
4
5
data(){
    return {
        example: [2,3,1]
    }
}

methods

组件的methods是一个包含方法的对象，自动绑定this，始终指向组件实例。定义时避免使用箭头函数，会影响this的指向

1
2
3
4
5
6
7
8
methods:{
    exampleFuction(){
        example[2] = 3
    }
}

//可以在组件模版中被访问
<button @click="exampleFuction">Change example</button>

1. 安装依赖npm install -g @vue/cli-service-global

2. 创建文件xxx.vue

3. 在文件目录运行vue serve xxx.vue

最近打算重写个人网站了，想想可以把之前练手的前端设计的个站、gist网站、还有当前的个站整合在一起，还要加一些作品集展示区。
本事一般想法挺大。感觉又要重学一遍了。
这周末再怎么犹豫也要把离职提了，做点自己喜欢的吧。

2D光随鼠标移动转变方向

1
2
3
4
5
6
7
8
9
10
11
12
13
14

void Update () {
//获取鼠标的坐标，鼠标是屏幕坐标，Z轴为0，这里不做转换  
Vector3 mouse = Input.mousePosition;
//获取物体坐标，物体坐标是世界坐标，将其转换成屏幕坐标，和鼠标一直  
Vector3 obj = Camera.main.WorldToScreenPoint(transform.position);
//屏幕坐标向量相减，得到指向鼠标点的目标向量，即黄色线段  
Vector3 direction = mouse - obj;
//将Z轴置0,保持在2D平面内  
direction.z = 0f;
//将目标向量长度变成1，即单位向量，这里的目的是只使用向量的方向，不需要长度，所以变成1  
direction = direction.normalized;
//物体自身的Y轴和目标向量保持一直，这个过程XY轴都会变化数值  
transform.up = direction;
}