初识Vue.js

“今天先给大家介绍一下Vue的重要的基础”

01
—

[h1]Computed和methods和watch三者的作用，区别[/h1]
[h2]计算属性computed[/h2]模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以要使用计算属性
methods计算逻辑的过程，
用法基本和methods相同，但要使用return返回计算好的值,最终拿到的是一个计算好的结果时。methods每一次都会进行重复计算，只要调用一次方法就会执行一次方法，computed下的方法是有缓存，只要计算好一次值之后，这个值没有发生改变，它就地复用上一次计算好的值，而不会重复计算，computed性能要比methods高。
[h2]watch侦听属性[/h2]（1）监听属性，属性和方法名同名，且方法会随着属性的变动而触发，由于性能问题，尽可能避免使用监听属性，如果最终拿到的是一个固定的值时，使用计算属性代替监听属性。
（2）深度监听:使用对象数据

对象数据:{

复制代码

[/code][code] handler(){ //语句柄固定写法

复制代码

[/code][code] console.log('arr属性被改动');

复制代码

[/code][code] },

复制代码

[/code][code] deep:true //开启深度监听

复制代码

[/code][code] },

复制代码

[/code][code]深度监听，使用对象数据的时候去使用，当开启深度监听时,vue会自动遍历数据，只要里边的数据进行变动就会触发相对应的方法，非常的消耗性能，每当改变数据时就会遍历一次数据对象，谨慎使用

复制代码

[/code][code]（3）watch:{ //val接收输入框变化的内容

复制代码

[/code][code] keyWord(跟随data下变动对应的数据){}

复制代码

[/code][code]}

复制代码

02
—

[h1]模板语法（表达式）[/h1]

{{模板语法}} v-指令中”模板语法”，注意点：可以渲染简单的赋值，简单的运算。不要去使用js语句,会产生模板错误，但可以使用三元运算符,包含js对象的运算可以使用，但不推荐。长语句的计算，不要写在模板里边，难以维护，消耗性能。

03
—

[h1]组件[/h1]（1）允许我们使用小型、独立和通常可复用的组件构建大型应用，方便调错。
（2）全局组件：Vue.component('组件名',{模板内容}) 组件内容只有一个根元素，组件名声明时不要使用驼峰命名规则,组件名声明时开头字母大写或使用横杠方式为了和普通的DOM节点进行区分 Mycomponent my-component，即便注册了全局组件也需要实例化vue，组件可以在DOM中调用多次（想成函数封装调用）
（3）组件下的数据data必须是一个函数模板（DOM） JS data(){return{数据仓库}}，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
（4）局部组件：在vue实例化下components{组件名:{模板},组件名:{模板}}，其他内容使用和全局组件相同
（5）使用嵌套DOM标签时，组件封装之后需要使用is的方法插入到DOM节点

Vue.component('my-component',{ template:` 1 `});

复制代码

[/code][code]

复制代码

1. Props传值:
[h2][/h2]（1）可以把组件复用中变动的值提取出来使用props进行传值,提高组件的复用率 n=可以当成函数中的实参’
props:[‘可以当成函数的形参','name'],
（2）使用props传值如果实际传值的位置使用横杠，接收porps值的位置要使用驼峰命名规则，不建议使用 my-msg="2" 接收时props:['myMsg']
（3）动态传递props：，父级中的数据向子级中去传递时，使用动态绑定props的方法进行传递，使用动态传递props值时可以传递多种数据类型，提高组件复用率
（4）什么时候要用poros验证：当协同开发时，开发好的组件别人在使用时，只是用模板，不使用数据，数据一般情况下会自己定义，但是很多情况下别人不知道该传入什么数据类型，在这种情况下要使用props验证

props:{ //props验证需要写在对象下

复制代码

str:String,

复制代码

num:[String,Number], //传入的props可以是多种数据类型

复制代码

n:{ //使用props默认值，使用对象类型，规定数据类型后使用default赋上默认值

复制代码

type:Number, //一旦进行传值,默认值将被替换

复制代码

default:100

复制代码

}

复制代码

}

复制代码

[h2]2. 条件渲染[/h2]（1）v-if v-else-if v-else 可以配合使用，配合使用时中不要插入其他DOM节点
（2）template 可以使用模板渲染多条内容,且不需要渲染根节点时使用
（3）v-if="可以使用表达式"
（4）使用v-if切换节点时，vue默认是高效渲染的，就地复用元素，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处,当加入唯一的key值时可以让DOM节点摧毁重建
（5）V-if和v-show的区别:v-show改变style中的样式,v-if把整个节点摧毁重建,一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

04
—
[h1]下面的是一些面试中常遇见的面试题[/h1]1. 组件的作用和优点，什么组件化开发
2. Props传值的作用，props验证的作用
3. 父级向子级中传值用什么方法
4. Vue优化
5. V-if和v-show的区别